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

Question

我试图通过遵循本教程使用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,但随意疯狂!