webpackJsonp is not defined: webpack-dev-server and CommonsChunkPlugin

Question

This is my webpack.config.js file:

const webpack = require('webpack');
const path = require('path');

module.exports = {
  cache: true,
  devtool: 'source-map',
  entry: {
    app : [
      './src/index.js'
    ],
    vendor: ['lodash']
  },
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist'),
    publicPath: '/dist/',
    pathinfo: true
  },
  module: {
    loaders: [
      { test: /\.js$/, exclude: /node_modules/, loaders: ['babel'] },
      { test: /\.scss/, exclude: /node_modules/, loaders: ['style', 'css', 'sass'] }
    ]
  },
  plugins: [
    new webpack.NoErrorsPlugin(),
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js', Infinity)
  ]
};

And this is my scripts that runs the webpack-dev-server:

const webpack =require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const webpackConfig = require('../webpack.config');
const _  = require('lodash');

const webpackDevConfig = _.cloneDeep(webpackConfig);
const devPort = 3000;

webpackDevConfig.entry.app.unshift('webpack/hot/dev-server');
webpackDevConfig.entry.app.unshift('webpack-dev-server/client?http://localhost:' + devPort + '/');
webpackDevConfig.plugins.push(new webpack.HotModuleReplacementPlugin());

new WebpackDevServer(webpack(webpackDevConfig), {
  publicPath: webpackConfig.output.publicPath,
  hot: true,
  stats: {
    colors: true,
    chunks: false
  }
}).listen(devPort, 'localhost');

The webpack command output is good (bundle.js and vendor.bundle.js), however, the dev server fails with webpackJsonp is not defined (although its in-memory compilation succeeded).

When removing CommonsChunkPlugin from webpack.config.js - it all works fine:

...
entry: [
    './src/index.js'
  ],
...
plugins: [
    new webpack.NoErrorsPlugin()
  ]

Any ideas?

Answer 1

In your index.html file just call vendor.bundle.js before bundle.js

<script src="assets/js/vendor.bundle.js"></script>
<script src="assets/js/bundle.js"></script>

That's all, now it should work. More information.

Answer 2

Rename vendor entry point to

'vendor.js': ['lodash']

Answer 3

Just to expand a little on the concept, the vendor has to come first since the runtime is contained in there (everything that defines all the variables and methods run during client load time because of all the webpacking).

If you use a manifest file (because of chunking and so on), you'll have to put that first since it will then contain the runtime because of the way the module is built.