[Webpack 2] Chunking common modules from multiple apps with the Webpack CommonsChunkPlugin

Posted 2020-07-28 Answer1215

If you have a multi-page application (as opposed to a single page app), you’re likely sharing modules between these pages. By chunking these common modules into a single common bundle, you can leverage the browser cache much more powerfully. In this lesson we’ll use webpack’s CommonsChunkPlugin to easily share common modules between apps.

 

const webpack = require(‘webpack‘)
const {resolve} = require(‘path‘)
module.exports = env => {
  return {
    entry: {
      app: ‘./js/app.js‘,
      animalFacts: ‘./animal-facts/js/app.js‘,
    },
    output: {
      filename: ‘bundle.[name].js‘,
      path: resolve(__dirname, ‘dist‘),
      pathinfo: !env.prod,
    },
    context: resolve(__dirname, ‘src‘),
    devtool: env.prod ? ‘source-map‘ : ‘eval‘,
    bail: env.prod,
    module: {
      loaders: [
        {test: /\.js$/, loader: ‘babel!eslint‘, exclude: /node_modules/},
        {test: /\.css$/, loader: ‘style!css‘},
      ],
    },
    plugins: [
      env.test ? undefined : new webpack.optimize.CommonsChunkPlugin({
        name: ‘common‘,
        filename: ‘bundle.common.js‘,
        chunks: [‘app‘, ‘animalFacts‘]
      }),
    ].filter(p => !!p),
  }
}