输出 2(或更多).css webpack 中带有 mini-css-extract-plugin 的文件

Question

当使用 webpack 2(或 3(时，我可以编写如下代码：

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 文件。

我怎样才能用mini-css-extract-plugin达到相同的目标？根据文档，我只能指定一个文件名：

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

谢谢。

Answer 1

此示例也符合 SCSS，并且不使用 MiniCssExtractPlugin

在 Webpack 4.16.5 中，我设法通过首先安装这两个软件包来使其工作

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

然后在您的 webpack.config 中.js

//const MiniCssExtractPlugin = require("mini-css-extract-plugin");
var path = require("path");
module.exports = {
entry: ['./blocks.js', './block.editor.scss', './block.style.scss'],
mode: 'production',//change to 'development' for non minified js
output: {
path: path.resolve(__dirname, "dist"),
filename: 'blocks.build.js',
publicPath: "/dist"
},
watch: true,
module: {
rules: [
{
test: /.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
},
{
test: /.scss$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].build.css',
context: './',
outputPath: '/',
publicPath: '/dist'
}
},
{
loader: 'extract-loader'
},
{
loader: 'css-loader',
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
},
],
},
};

这将输出以下结构

要最小化 CSS 安装

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

添加到 webpack.config.js

const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
var path = require("path");
module.exports = {
//...
watch: true,
module: {
rules: [
//...
],
},
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true // set to true if you want JS source maps
}),
new OptimizeCSSAssetsPlugin({})
]
},
};

希望这有帮助