Exercise: Adding Commons Chunking Part 1
Branch 06.0-commons-chunk
So, still need to add both script tags to index.html:
First, we need to find the code that doesn't change often. In his app, it's the todomvc-app-css/index.css file.
Then, in Webpack we need to change the entry point:
Then, in Webpack we need to change the entry point:
// **** webpack.config.babel.js ****
...
module.exports = env => {
const {ifProd, ifNotProd} = getIfUtils(env)
const config = webpackValidator({
context: resolve('src'),
// 1. change the entry point
entry: {
app: './bootstrap.js',
// 1. ++++ add the vendor entry
// these contain all the vendor files
// we want to chunk
vendor: ['todomvc-app-css/index.css'],
},
...
$ npm run build dev
We get an error: Conflict: Multiple assets emit to the same filename 'bundle.js'
Aside: adding a progress bar to the build
// **** webpack.config.babel.js ****
...
plugins: [
new ProgressBarPlugin()
],
...
Back to the error ( Conflict: Multiple assets emit to the same filename 'bundle.js') We have to make the bundle file name unique. We can use a hash or a name for the output:
// **** webpack.config.babel.js ****
entry: {
app: './bootstrap.js',
vendor: ['todomvc-app-css/index.css'],
},
output: {
// 1. ++-- add .[name]
filename: 'bundle.[name].js',
path: resolve('dist'),
pathinfo: ifNotProd(),
},
Now the output files are named bundle.app.js and bundle.vendor.js, so we would need to update index.html to use these. We need one more step, since later we will not be using these names but be using hash to name the files.
Adding the commons chunk plugin
Require webpack in webpack.config.babel.js:
// **** webpack.config.babel.js ****
/* eslint no-console:"off" */
const {resolve} = require('path')
// 1. ++++
const webpack = require('webpack')
const ProgressBarPlugin = require('progress-bar-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpackValidator = require('webpack-validator')
const {getIfUtils, removeEmpty} = require('webpack-config-utils')
...
plugins: [
new ProgressBarPlugin(),
// 2. ++++ add more 'optimize' plugins from webpack
// we're telling webpack to create the
// common chunks from the vendor files
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
})
]
At this point bundle.app.js requires the vendor files, but does not include it.
<script src="dist/bundle.vendor.js"></script>
<script src="dist/bundle.app.js"></script>
Q&A: Does the order of the plugins matter?
It does sometimes matter. He's pretty sure, though never personally run into a problem with it.