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

😊