CODEWITHSUNDEEP
webpack
Nicolas S.Xu
Nicolas S.Xu

Reputation: 14544

Why my webpack named chunk not working?

I am trying to use webpack code splitting with named chunk by following this tutorial. Code splitting works, but when I try to name the split chunk, it doesn't work. Here is my code for naming the split chunk:

$('.load_link').on('click', function() {

    require.ensure(['./extra'], function(require) {
        require('./extra');

    }, 'extra_bundle');
    // the name doesn't work, but splitting works
});

Here is my webpack config:

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: ['webpack/hot/dev-server','./src/app.js'],
    output: {
        path: __dirname + '/dist',
        filename: "bundle.js"
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({template: './src/index.html'})
    ],
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" }
        ]
    }
};

The named chunk doesn't work is because I can see the split chunk is still using the generic name:

enter image description here

I expect the 1.bundle.js to be "extra_bundle.js", but it is not. How to make the chunk name works?

Upvotes: 2

Views: 4007

Answers (2)

Eliran Malka
Eliran Malka

Reputation: 16263

to address the OP's issue more specifically;

to get the proper chunk name, pass it as the fourth argument, like so:

require.ensure(['./extra'], function(require) {
    require('./extra');
}, function (error) {
    console.error('mayday! mayday!', error);
}, 'extra_bundle');

from the docs:

require.ensure()

The syntax is as follows:

require.ensure(
    dependencies: String[],
    callback: function(require),
    errorCallback: function(error),
    chunkName: String
)

Upvotes: 0

Ambroos
Ambroos

Reputation: 3476

To get the chunk name to be visible in the filename, you need to set the chunkFilename in your output settings and use the [name] token. An example:

  output: {
    filename: 'bundle.[hash].js',
    chunkFilename: '[name].[hash].[chunkhash].chunk.js',
  },

You don't have to use all of them of course, [name].js is a perfectly valid chunkFilename too, but feel free to go wild!

Upvotes: 8

Related Questions