Exercise: Adding Commons Chunking Part 2

In notebook:
FrontEndMasters Webpack Deep Dive
Created at:
2017-01-04
Updated:
2017-01-04
Tags:
Webpack libraries JavaScript

Now the tests are failing

uncaught referenceError: webpackJsonp is not defined

The tests are not loading the necessary plugins for the commons chunk to work. It's actually the vendor chunk that holds the webpack runtime. 

On the other hand we don't need commons chunking for the tests. We included previously the conditional utils so we can take advantage of that here as well:
  // ****   webpack.config.babel.js   ****

...
  plugins: [
    new ProgressBarPlugin(),
    // 1. ++++ wrap here with ifProd
    ifProd(new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
    })),
  ]
Except that we need to remove the elements from the array otherwise webpack will throw an error
  // ****   webpack.config.babel.js   ****

// 1. ++++ also get removeEmpty here
const {getIfUtils, removeEmpty} = require('webpack-config-utils')

...
// 2. ++++ use removeEmpty to clean the array
// (when ifProd returns undefined)
  plugins: removeEmpty([
    new ProgressBarPlugin(),
    ifProd(new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
    })),
  ]),
So now, we're no longer chunking for the test environment.