I’ve just started playing with the Webpack and I’ve come across the issue of splitting code in multiple chunks with multiple entries.
I want to achieve on-demand loading of specific modules, but with the current configuration, only the last one (page2) gets properly executed – styles passed to CSS loaders get applied to the page. For other two page entry points (index and page1), file is requested, but nothing executes (index should execute ./foo while page1 should execute ./bad).
Am I missing something here?
Final output is:
5dc9d19eee654495ffd2.chunk.js
core.bundle.js
index.bundle.js
page1.bundle.js
page2.bundle.js
Chunk file contains all ensured modules, but I would expect to have three separate chunks. Or am I wrong?
./foo module:
var fooCss = require('./foo.css');
var bar = require('./bar');
module.exports = 'foo';
./bad module:
var badCss = require('./bad.css');
var bag = require('./bag');
module.exports = 'bad';
./bag module:
var bag = require('./bag.css');
module.exports = 'bag';
Index page:
document.querySelector('button').addEventListener('click', function () {
require.ensure([], function () {
var foo = require('./foo');
});
});
Page 1:
document.querySelector('button').addEventListener('click', function () {
require.ensure([], function () {
var bad = require('./bad');
});
});
Page 2:
document.querySelector('button').addEventListener('click', function () {
require.ensure([], function () {
var bag = require('./bag');
});
});
Webpack config:
module.exports = {
{
entry: {
core: ['jquery', 'underscore','./input/core.js'],
index: './input/index.js',
page1: './input/page1.js',
page2: './input/page2.js'
},
output: {
path: './output',
publicPath: '//example.com/output/',
filename: '[name].bundle.js',
chunkFilename: '[hash].chunk.js'
},
module: {
loaders: [
{
test: /\.json$/,
loaders: ['json']
},
{
test: /\.js$/,
loaders: ['imports?define=>false']
},
{
test: /\.css$/,
loaders: ['style', 'css']
}
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'core',
filename: 'core.bundle.js'
}),
]
}
};
It should be
chunkFilename: '[chunkhash].chunk.js'orchunkFilename: '[id].[hash].chunk.js'instead.