'Chunks'在CLI输出中意味着什么?

时间:2018-01-26 10:07:22

标签: webpack frontend commonschunkplugin

命令我运行:

$ webpack --config webpack.config.js -p --progress

这是我得到的结果。 chunks是什么意思?为什么他们有时会改变? 如果我理解正确,那么块越多越好。

但我看不到相同数量的文件。如果我在每个入口点都有0-1-2个块,那么块的文件在哪里呢?我只有入口点

许多 enter image description here

enter image description here

我的WP配置:

module.exports = {
    context: path.resolve(__dirname, '..'),
    entry: {
        index: 'index.wp',
        home: 'home.wp',
        vendors: [
            'react',
            'react-dom',
            'querystring',
            'react-router',
        ]
    },
    output: {
        path: path.resolve(__dirname, '_distro_'),
        publicPath: '/',
        filename: '[name].[chunkhash:5].js',
        pathinfo: true,
        chunkFilename: 'chunk-[name].[chunkhash].js'
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            names: ["vendors", 'index', 'home'],
            minChunks: 1 // << I play with this value and # of chunks change
        }),
    ],
}

WP GitHub https://github.com/webpack/webpack/issues/6387

1 个答案:

答案 0 :(得分:3)

webpack中的块是什么?

由于webpack创建了所有依赖项的依赖关系图,因此需要一种方法[和格式]将此信息输出到磁盘。由于图形很难以文件格式表示,因此webpack使用称为“块”的封装。 Chunk只是一个模块数组,当“渲染”输出你的包时。

然而,Chunk也有自己的图表。当您引用在构建输出中提到的ID时,这表明一个块与另一个块之间的依赖关系。

例如,当您使用代码拆分时,webpack将创建一个将异步加载的单独块。

但现在这意味着有两个捆绑包,它们必须以正确的方式加载:

{{1}}

ID是父子关系,它允许像html-webpack-plugin这样的插件知道将捆绑包注入HTML的顺序。我们称之为“块图”。您可以在https://webpack.js.org/glossary/#c

了解有关此信息的更多信息