Order multiple Webpack entry points

Question

I have several entries in my webpack configuration:

entry: { 'polyfills': './src/polyfills.ts', 'vendor': './src/vendor.ts', 'app': './src/main.ts' }, 

When I run npm start ( webpack-dev-server --inline --progress --port 8080 --bail ), \<my-app>Loading...</my-app> in my index.html turns into scripts in the following order:

 <script type="text/javascript" src="http://localhost:8080/common.js"> <!--I also have CommonsChunkPlugin--> </script><script type="text/javascript" src="http://localhost:8080/vendor.js"></script> <script type="text/javascript" src="http://localhost:8080/polyfills.js"></script> <script type="text/javascript" src="http://localhost:8080/app.js"></script> 

But when I ran webpack -p --progress --profile --bail in the following order:

general, application, polyfil, then supplier

Order is important. My app.js code will not work if executed before polyfil.js or vendor.js. How to manage the order?

Answer 1

Thanks @EdmarMiyake for pointing me towards pieces of SortMode. At first I tried to set it to “addictive,” but that didn't seem to work. In the end, I turned to this:

 function packageSort(packages) { return function sort(left, right) { var leftIndex = packages.indexOf(left.names[0]); var rightindex = packages.indexOf(right.names[0]); if ( leftIndex < 0 || rightindex < 0) { throw "unknown package"; } if (leftIndex > rightindex){ return 1; } return -1; } }; 

and

 new HtmlWebpackPlugin({ template: 'src/index.html', chunksSortMode: packageSort(['common', 'polyfills', 'vendor', 'app']) }), 

Answer 2

You can create an assistant to execute it:

 function packageSort(packages) { // packages = ['polyfills', 'vendor', 'app'] var len = packages.length - 1; var first = packages[0]; var last = packages[len]; return function sort(a, b) { // polyfills always first if (a.names[0] === first) { return -1; } // app always last if (a.names[0] === last) { return 1; } // vendor before app if (a.names[0] !== first && b.names[0] === last) { return -1; } else { return 1; } } } 

And in your webpack config file:

 plugins.index = new HtmlWebpackPlugin({ template: 'src/index.html', filename: 'index.html', chunksSortMode: packageSort(['polyfills', 'vendor', 'app']) }); 

Answer 3

This function can be even better: you give a list of the element that you want to place first in your html file

 function packageSort(packages) { return function sort(left, right) { var leftIndex = packages.indexOf(left.names[0]); var rightindex = packages.indexOf(right.names[0]); if (rightindex < 0) { return -1; } if ( leftIndex < 0) { return 1; } if (leftIndex > rightindex){ return 1; } return -1; } };