`require.ensure` and on-demand loading for multiple entries

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'
        }),
    ]
}
};

Author: Fantashit

1 thought on “`require.ensure` and on-demand loading for multiple entries

  1. chunkFilename: ‘[hash].chunk.js’

    It should be chunkFilename: '[chunkhash].chunk.js' or chunkFilename: '[id].[hash].chunk.js' instead.

Comments are closed.