我正在尝试使用 webpack 4 min-css-extract-plugin 和 splitChunks 插件生成多个 css。
这是我的 webpack 配置。
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require("path");
module.exports = [{
entry: './index.js',
output: {
filename: '[name].js',
path: path.resolve(path.join(__dirname, "./dist")),
},
optimization: {
splitChunks: {
cacheGroups: {
vendor: false,
commons: {
name: 'commons',
test: /.styl$/,
chunks: 'all',
enforce: true,
minChunks: 1,
},
englishStyle: {
name: 'styles_en',
test: (c) => {
return c.type.match(/mini-css-extract-plugin/) && c._identifier.indexOf('_ar') === -1;
},
chunks: 'all',
priority: 1,
enforce: true,
},
arabicStyles: {
name: 'styles_ar',
test: (c) => {
return c.type.match(/mini-css-extract-plugin/) && c._identifier.indexOf('_ar') !== -1;
},
priority: 1,
chunks: 'all',
enforce: true,
}
}
}
},
module: {
rules: [
{
test: /\.styl$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"stylus-loader"
],
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[name].css"
})
]
}]
这是我的 css 文件结构。
common.styl
...
style.styl
@import common.styl
...
style_ar.styl
@import common.styl
...
index.js
import styles from style.styl
import styles from style_ar.styl
上面的配置只生成了styles_ar.css 和style.css 两个文件。在两个文件中都有共同的内容。
如何为普通文件生成单独的文件？
如果我优先使用commons cacheGroup，它只会生成一个文件commons.styl。
最佳答案
这是一种“否定”的答案，但如果你指出我错过了什么 - 我会放弃它。
1)css 尽管 MiniCssExtractPlugin 是一种技巧，人们使用它来不创建 gulp 文件来生成 css 文件 - 他们只想将所有内容保留在一个地方(并编写更少的代码)。为什么这是可能的 - 一切正常 - 但不要忘记这仍然是一个技巧。
这是你的动机吗？或者在现实生活中您需要将高度特定的 webpack 插件包含到 css 生产过程中？我不是在谈论 autoprefixer - 你也可以使用 gulp 中的 post-css。但是真的是 webpack 特有的吗？可能是一些 webpack 运行时特性？
2)“强制”一个技巧不仅仅是技巧，这不是一个好主意。
注意:当您想为 css 和 js 创建“一个混合包”时，我们不涵盖这种情况 - 这意味着使用 css-loader没有 MiniCssExtractPlugin - 这将是一个完全不同的故事。
所以答案是:直接用stylus生成你想要的chunked css。
或者尝试“更重的技巧”:https://github.com/faceyspacey/extract-css-chunks-webpack-plugin
关于css - Webpack 4 splitChunks 生成多个 css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52202194/