Webpack 在网页包中使用迷你css提取插件输出2个（或更多）.css文件

使用Webpack2（或Webpack3）时，我可以编写如下代码：

const coreStyles = new ExtractTextPlugin('./styles/core.bundle.css');
const componentStyles = new ExtractTextPlugin('./styles/components.bundle.css');

rules: [
{
   test: /\.scss$|\.css$/,
   include: path.resolve(__dirname, './styles/App.scss'),
   use: coreStyles.extract({
       use: ['css-loader', 'sass-loader']
   })
},
{
   test: /\.scss$|\.css$/,
   exclude: path.resolve(__dirname, './styles/App.scss'),
   use: componentStyles.extract({
       use: ['css-loader', 'sass-loader']
   })
}
]

结果，我在输出中得到了2个css文件

如何使用

迷你css提取插件

达到同样的效果？根据文档，我只能指定一个文件名：

plugins: [
    new MiniCssExtractPlugin({
        filename: "[name].css",
    })
]

---

谢谢。

此示例也符合SCS，不使用MinicsSextract插件

在Webpack4.16.5中，我通过首先安装这两个软件包来实现这一点

npm install --save-dev file-loader
npm install --save-dev extract-loader

然后在webpack.config.js中

//const MiniCssExtractPlugin=require（“mini-css提取插件”）；
var路径=要求（“路径”）；
module.exports={
条目：['./blocks.js'，'./block.editor.scss'，'./block.style.scss']，
模式：'生产'，//对于非小型js更改为'开发'
输出：{
path:path.resolve（_dirname，“dist”），
文件名：“blocks.build.js”，
公共路径：“/dist”
},
手表：没错，
模块：{
规则：[
{
测试：/.js$/,，
加载器：“巴别塔加载器”，
排除：/node_模块/，
},
{
测试：/\.scss$/,，
使用：[
{
加载器：“文件加载器”，
选项：{
名称：'[name].build.css'，
上下文：“./”，
outputPath:“/”，
公共路径：'/dist'
}
},
{
加载器：“提取加载器”
},
{
加载器：“css加载器”，
},
{
加载器：“sass加载器”，
选项：{
sourceMap:true
}
}
]
},
],
},
};

这将输出以下结构

要安装CSS，请单击minifi

npm install --save-dev uglifyjs-webpack-plugin
npm install --save-dev optimize-css-assets-webpack-plugin

添加到webpack.config.js

const UglifyJsPlugin=require（“uglifyjs网页包插件”）；
const optimizecssassetstplugin=require（“优化css资产网页包插件”）；
var路径=要求（“路径”）；
module.exports={
//...
手表：没错，
模块：{
规则：[
//...
],
},
优化：{
最小值：[
新的UglifyJsPlugin({
是的，
对,，
sourceMap:true//如果需要JS源映射，请将其设置为true
}),
新的OptimizeCSSAssetsPlugin（{}）
]
},
};

---

希望这有帮助

这对我来说很好，我花了好几个小时才找到它同意，使用scss入口点并期望css文件（没有任何杂碎）似乎是一个常见的用例（尽管可能不是预期的）。谢谢你发布答案。我从一个较旧的设置迁移到这里，这帮了我很大的忙。这可以工作，但会弄乱字体。我该怎么加载Google字体呢？这破坏了我项目中的字体。有什么想法吗？字体在谷歌的css中，apilI尝试了这个设置，效果非常好，只是我无法为每个块在html生成上创建链接标记。有什么解决办法吗？