WebpackJsonp undefined: 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 these are my scripts that run 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 output of the webpack command webpack good (bundle.js and vendor.bundle.js), however the dev server fails with webpackJsonp is not defined (although its compilation in memory was successful).

When removing CommonsChunkPlugin from webpack.config.js - everything 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. Additional Information.

Answer 2

Rename the provider entry point to

'vendor.js': ['lodash']

Answer 3

In order to expand the concept a bit, the provider should be the first, since the runtime is contained there (everything that defines all the variables and methods that are executed at client load time due to the entire web package).

If you are using a manifest file (due to chunking, etc.), you will need to migrate it because it will contain a runtime because of the way the module is created.