0

I have webpack generating the following bundle files:

  • main.prod.js (Good)
  • vendors.prod.js (Good)
  • 0.chunk.prod.js (Bad - this is bundle for a lazy loaded module)
  • 1.chunk.prod.js (Bad - this is bundle for a lazy loaded module)

The problem is that I want the lazy loaded modules (ex: 0.chunk.prod.js) to be part the main.prod.js bundle.

webpack.common.js

module.exports = {
   entry: {
       'polyfills': './staticContent/polyfills.ts',
       'main': ["./path/to/main.ts" ]
    },
    resolve: {
        extensions: ['.ts', '.js'],
        alias: { }
    },
    module: {
      loaders: [
          {
              test: /\.html$/,
              use: 'html-loader?minimize=false',
          },
      ]
  },
  plugins: [
        new webpack.optimize.CommonsChunkPlugin({
           name: "vendors",
           minChunks: function (module) {
             return module.context && module.context.indexOf("node_modules")!== -1;
          }
       })
  ]
};

webpack.prod.js

module.exports = webpackMerge(commonConfig, {
    output: {
        path: __dirname + '/bundles',
        filename: '[name].prod.js',
        chunkFilename: '[id].chunk.prod.js'
    },
    module: {
        loaders: [
            { test: /\.ts$/, loaders: ['@ngtools/webpack'] }
        ]
    },
    plugins: [
        new AotPlugin({
            tsConfigPath: './tsconfig.aot.json',
            entryModule: 'path/to/app.module#AppModule'
        }),
        new ExtractTextPlugin({
            filename: "[name].prod.css"
        }),
        new webpack.optimize.UglifyJsPlugin({
                minimize: true,
                compress: {
                    warnings: false
                },
                output: {
                    comments: false
                },
                sourceMap: false
            }
        )
    ]
});
vidalsasoon
  • 4,365
  • 1
  • 32
  • 40
  • just curious: Why are you using lazy loaded modules if you want them bundled into the main script? – BeetleJuice Jul 12 '17 at 01:50
  • I had done the same thing with gulp+rollup previously with good performance results and it was simple to deal with one bundle. maybe there's a simpler way with webpack to handle this but i'm missing it? – vidalsasoon Jul 12 '17 at 02:05
  • I ask because I think the main point of lazy loading is that the script is not loaded until it is requested during app use, as a way to limit initial download size and parsing time. Since you're giving up much of that benefit, I just wondered why not use regular (not lazy) routes? Their setup is simpler and easier to maintain. – BeetleJuice Jul 12 '17 at 02:23

0 Answers0