javascript - Ordenando múltiples puntos de entrada en Webpack

Tengo múltiples entradas en mi configuración de Webpack:

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

Cuando ejecuto npm start (webpack-dev-server --inline --progress --port 8080 --bail) el \<my-app>Cargando...</my-app> en mi index.html se convierte en scripts en este orden:

<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>

Pero cuando ejecuto webpack -p --progress --profile --bail, es en este orden:

común, aplicación, polyfil, luego vendedor

El orden es importante. Mi código de app.js no funcionará si se ejecuta antes de polyfil.js o vendor.js. ¿Cómo controlo el orden?

Respuesta #1

Puedes usar la opción 'manual' hoy en día :

new HtmlWebpackPlugin({
    chunks: ['polyfill', 'vendor', 'bundle'],
    chunksSortMode: 'manual',
}),

Respuesta #2

Puedes crear un ayudante para lograrlo:

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;
      }
    }
  }

Y en tu archivo de configuración de webpack:

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