So When I try to split my application into 1 application.js file and 1 libraries.js file, everything works fine. When I try to split it up into 1 application.js file and 2 libraries.js files, I get this error when building:
ERROR in CommonsChunkPlugin: While running in normal mode it's not allowed to use a non-entry chunk (libraries-react)
Anyone know what might be causing this error?
My configuration for webpack is
var webpack = require("webpack"); var ExtractTextPlugin = require("extract-text-webpack-plugin"); var extractSass = new ExtractTextPlugin('main.css'); module.exports = { module: { loaders: [{ test: /\.jsx$/, loader: 'babel', exclude: ['./node_modules'], query: { presets: ['react', 'es2015'] } }, { test: /\.scss$/, loader: extractSass.extract(['css', 'sass']) }, { test: /\.html$/, loader: 'file?name=[name].[ext]' }, { test: /\/misc\/.*\.js$/, loader: 'file?name=/misc/[name].[ext]' }, { test: /\.(png|jpg|jpeg|)$/, loader: 'file?name=/images/[name].[ext]' }] }, plugins: [ extractSass, new webpack.optimize.CommonsChunkPlugin('libraries-core', 'libraries-core.js'), new webpack.optimize.CommonsChunkPlugin('libraries-react', 'libraries-react.js') ], entry: { //3rd party libraries 'libraries-core': [ 'lodash', 'superagent', 'bluebird', 'eventemitter3', 'object-assign', 'schema-inspector', 'jsuri', 'store-cacheable', 'immutable' ], 'libraries-react': [ 'react', 'react-dom', 'react-router', 'nucleus-react' ], //application code application: './web/app/application.jsx', //mocks 'mocked-api': './web/app/mock/api.js', 'mocked-local-storage': './web/app/mock/local-storage.js' }, output: { path: './web/build', publicPath: '/build', filename: '[name].js' } }
The CommonsChunkPlugin is an opt-in feature that creates a separate file (known as a chunk), consisting of common modules shared between multiple entry points.
Chunk: This webpack-specific term is used internally to manage the bundling process. Bundles are composed out of chunks, of which there are several types (e.g. entry and child).
splitChunks. If the current chunk contains modules already split out from the main bundle, it will be reused instead of a new one being generated. This can affect the resulting file name of the chunk. webpack.config.js module.
Following the github issue#1016, you need to reverse the order of the chunk names in plugin definition regarding to the entry points' definition
It seems like a bug to this webpack plugin for the time being...
new webpack.optimize.CommonsChunkPlugin('libraries-react', 'libraries-react.js') new webpack.optimize.CommonsChunkPlugin('libraries-core', 'libraries-core.js')
or
new webpack.optimize.CommonsChunkPlugin({names: ['libraries-react', 'libraries-core'], filename: '[name].js')
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With