Webpack-4 MiniCssExtractPlugin splitChunks

Question

我正在尝试让Webpack-4 splitChunks优化这样做：

1. 将所有JS&CSS不放在任何入口点，而是多次使用到公共文件(CSS & JS)中。
2. 将来自Vue组件的MiniCssExtractPlugin生成的所有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

我在摸索这个，但我就是这样解决问题的.

上面的问题是，extractedStuff条目扰乱了绑定，因为它必须将minChunks设置为1，必须删除该条目:我不能像这样组合提取的CSS。

我尝试过自己构建一个插件来组合CSS，但问题是它不会被复制:这样你就可以得到CSS的多个副本。

相反，这似乎是完美的工作，从迷你Css-提取-插件的建议。

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