Webpack-4 MiniCssExtractPlugin splitChunks

Question

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

1. 将所有JS和CSS放在任何入口点，但不止一次使用到公共文件（CSS＆amp; JS）。
2. 将来自Vue组件的MiniCssExtractPlugin生成的所有CSS合并到同一个公共CSS文件中。

我有这个工作（下面），但第二个＆＃34; extractStuff＆＃34;规则是将所有入口点代码也放入共享块中，这就是我试图用＃34; test＆＃34;来阻止的。 ＆＃34;入口点＆＃34;文件只是webpack存根，即使它只使用一次，所有内容都在公共文件中。它有效，但它并不优雅。

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

有谁知道那些＆＃34;模块，块＆＃34;的定义在哪里？对象是，或许我可以更好地进行测试。

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
            }
        }