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

標籤：

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),  }}

 

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