When using webpack 2(or 3), I could write code like:
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']
})
}
]
And as a result, I got 2 css files in output.
How can I reach the same with mini-css-extract-plugin
? As according to the docs I can specify only one file name:
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
})
]
Thanks.
This Example also complies the SCSS and doesn't use MiniCssExtractPlugin
In Webpack 4.16.5 I have managed to get this to work by first installing these 2 packages
npm install --save-dev file-loader
npm install --save-dev extract-loader
Then in your 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
}
}
]
},
],
},
};
This will output the following structure
- dist
--- block.editor.build.css
--- block.style.build.css
--- blocks.build.js
- blocks.js
- block.editor.scss
- block.style.scss
To minifi the CSS install
npm install --save-dev uglifyjs-webpack-plugin
npm install --save-dev optimize-css-assets-webpack-plugin
add to 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({})
]
},
};
Hope this helps
来源:https://stackoverflow.com/questions/50976979/output-2-or-more-css-files-with-mini-css-extract-plugin-in-webpack