Ship legacy JavaScript and CSS files in a Webpack Project with webpack-merge-and-include-globally

One of the projects that I’m working on is quite reliant on jQuery and Bootstrap. As we’re introducing new features (such as a few React-based components, and Stylus for CSS) in said project, we’ve also introduced Webpack into it. Now, we don’t want to run jQuery nor Bootstrap through Babel (using Webpack), but we want to keep on shipping them untouched to the user.

However, we do want those files to “live” in our Webpack ecosystem. Basically we just want to concatenate those assets, so that we can ship one single legacy.js and one legacy.css file to the user. This is where webpack-merge-and-include-globally comes into play:

Webpack plugin to merge your source files together into single file, to be included in index.html, and achieving same effect as you would by including them all separately through <script> or <link>.

Here’s how we use the plugin:


import webpack from 'webpack';
import MergeIntoSingleFilePlugin from 'webpack-merge-and-include-globally';

const config = (env) => ({
	// …

	plugins: [
		// …

		new MergeIntoSingleFilePlugin({
			files: {
				'js/legacy.js': [
					'assets/js/libs/jquery-2.2.3.min.js',
					'assets/js/libs/bootstrap.min.js',
					'assets/js/libs/moment-with-locales.min.js',
					'assets/js/libs/bootstrap-datetimepicker.min.js',
					'assets/js/libs/ekko-lightbox.min.js',
					'assets/js/scripts.js',
				],
				'css/legacy.css': [
					'assets/css/libs/animate.min.css',
					'assets/css/libs/bootstrap.min.css',
					'assets/css/libs/bootstrap-datetimepicker.min.css',
					'assets/css/libs/bootstrap-theme.min.css',
					'assets/css/libs/ekko-lightbox.min.css',
					'assets/css/screen.css',
				],
			},
		}),
	],
};

export default config;

With this in place we include legacy.js and legacy.css in the project to keep things working as they were before. Our “new” CSS and JS is written separately and is being ran through the entire Webpack build pipeline, like one would normally do. In the end we end up with four includes:

<!-- legacy files, concatenated -->
<script src="/js/legacy.js"></script>
<link rel="stylesheet" href="/css/legacy.css" />

<!-- our new files, compiled through Babel/Stylus/etc. -->
<script src="/js/app.js"></script>
<link rel="stylesheet" href="/css/styles.css" />

Installation per npm/yarn

yarn add -D webpack-merge-and-include-globally

😊

Did this help you out? Like what you see?
Thank me with a coffee.

I don't do this for profit but a small one-time donation would always put a smile on my face. Thanks!

☕️ Buy me a Coffee (€3)

Published by Bramus!

Bramus is a Freelance Web Developer from Belgium. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Join the Conversation

1 Comment

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.