为什么我的webpack名为chunk不起作用？

Question

我试图通过跟随this tutorial来使用webpack代码拆分与命名块。代码拆分有效，但是当我尝试命名拆分块时，它不起作用。 这是我命名拆分块的代码：

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

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

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

这是我的webpack配置：

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" }
        ]
    }
};

命名的块不起作用是因为我可以看到拆分块仍然使用通用名称：

我希望1.bundle.js是“extra_bundle.js”，但事实并非如此。 如何使块名称有效？

Answer 1

要在文件名中显示块名称，您需要在输出设置中设置chunkFilename并使用[name]令牌。一个例子：

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

当然，你不必全部使用它们，[name].js也是一个非常有效的chunkFilename，但随意疯狂！

Answer 2

更具体地解决OP的问题;

获取正确的块名称，将其作为第四个参数传递，如下所示：

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

来自docs：

  

require.ensure（）

     

语法如下：

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