Nathan Cooper Nathan Cooper - 1 year ago 386
TypeScript Question

Ordering multiple entry points in Webpack

I have multiple entries in my Webpack config:

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
) the
in my index.html turns into scripts in this 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 run
webpack -p --progress --profile --bail
it's in this order:

common, app, polyfil, then vendor

Order is important. My app.js code won't work if run before polyfil.js or vendor.js. How do I control the order?

Thanks @EdmarMiyake for pointing me in the direction of chunksSortMode. I tried setting it to 'dependency' first, but that didn't seem to work. In the end I resorted 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;


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

Answer Source

You can create a helper in order to accomplish 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'])
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download