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