CLI 输出中的“块”是什么意思？

Question

我运行的命令：

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

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

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

许多

单身的

我的 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

Answer 1

webpack 中的 chunk 是什么？

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

但是，Chunk 也有自己的图形。当您引用您在构建输出中提到的 ID 时，这说明了一个块和另一个块之间的依赖关系。

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

但是现在这意味着有两个包，它们必须以正确的方式加载：

[Chunk (parent)] 
    ====> [Chunk (depends on existence of parent for this to load)]

ID 是父子关系，它允许像 html-webpack-plugin 这样的插件知道以哪个顺序将您的包注入 HTML。我们称之为“块图”。您可以在https://webpack.js.org/glossary/#c 上了解有关此信息的更多信息