Webpack-4 MiniCssExtractPlugin splitChunks

Question

我正在尝试让 Webpack-4 splitChunks 优化来做到这一点：

1. 不要将所有 JS&CSS 放入任何入口点，而是将多次使用的所有 JS&CSS 放入公共文件（CSS 和 JS）中。
2. 将 MiniCssExtractPlugin 从 Vue 组件生成的所有 CSS 合并到同一个通用 CSS 文件中。

我有这个工作（如下），但第二个“extractedStuff”规则的效果是将所有入口点代码也放入共享块中，这是我试图通过“测试”来防止的。 “入口点”文件只是 webpack 存根，所有内容都在公共文件中，即使它只使用一次。它有效，但并不优雅。

有谁知道如何从第二条规则中排除入口点，还是有更好的方法来做到这一点？

有谁知道这些“模块，块”对象的定义在哪里，也许我可以通过某种方式使测试更好。

splitChunks: {

    cacheGroups: {     // Idea from github.com/webpack/webpack/issues/7230
        mainJS: {
            test: /\.js$/,
            name: "commons",
            chunks: "all",
            minChunks: 2,   // Makes it leave entry point JS alone.
            minSize: 0,
            priority: 20,
            enforce: true
        },
        extractedStuff: {
            test: (module, chunks) => module.depth > 0, 
            name: "commons", // Append to same file as previous rule.
            chunks: "all",
            minChunks: 1,   // ..or single-use CSS is not bundled.
            minSize: 0,
            priority: 10,
            enforce: true
        }
}

},

Answer 1

我对此感到困惑，但这是我解决问题的方法...

上面的问题是，extractStuff 条目弄乱了捆绑，因为它必须将 minChunks 设置为 1。必须删除该条目：我不能像那样组合提取的 CSS。

我自己尝试构建一个插件来组合 CSS，但这样做的问题是它不会去重复：这样你会得到多个 CSS 副本。

相反，这似乎工作得很好，取自 Mini-Css-Extract-Plugin 建议。

      cacheGroups: {
            mainJS: {
                test: /\.js$/,
                name: "commons",
                chunks: "all",
                minChunks: 2,
                minSize: 0,
                priority: 20,
                enforce: true
            },
            extractedCSS: {
                test: (module, chunks) => module.constructor.name === 'CssModule',
                name: "commons",
                chunks: "all",
                enforce: true
            }
        }