webpack mini-css-extract-plugin => output multiple css-files on single entry
You don't need multiple entries actually. With the configuration in your current solution, you are only missing a single option to make it work the way you want. The filename
options has to be set dynamically in base of the chunks names.
plugins: [
new MiniCssExtractPlugin({
filename: ({ chunk }) => `${chunk.name.replace('/js/', '/css/')}.css`,
})
],
This will create a .css
file for every chunk. Since you already have the style
and editor
chunks, it will create style.css
and 'editor.css', each one having the corresponding css or scss imported in the js files.
Check the documentations
It would look like this, with the only addition beeing the filename
change to the MiniCssExtractPlugin
options, and the removal of the css entry. This should work.
module.exports = {
...defaultConfig,
entry: {
index: path.resolve( process.cwd(), 'src', 'index.js' ),
},
optimization: {
...defaultConfig.optimization,
splitChunks: {
cacheGroups: {
style: {
name: 'style',
test: /style\.s?css$/,
chunks: 'all',
enforce: true,
},
editor: {
name: 'editor',
test: /editor\.s?css$/,
chunks: 'all',
enforce: true,
},
},
},
},
plugins: [
...defaultConfig.plugins,
new MiniCssExtractPlugin({
filename: ({ chunk }) => `${chunk.name.replace('/js/', '/css/')}.css`,
// chunkFilename: "[name].css"
})
],
module: {
...defaultConfig.module,
rules: [
...defaultConfig.module.rules,
{
test: /\.s?css$/,
exclude: /node_modules/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader'
],
},
]
},
};
See my comment, changed my setup and now it works: (OK, it's not a single entry anymore, but hey :-)
Project folder:
Plugin folder
|-- [src]
| |-- [block1]
| | |-- block1.js
| | |-- style.scss
| | `-- editor.scss
| |-- [block2]
| | |-- block2.js
| | |-- style.scss
| | `-- editor.scss
| `-- index.js
| `-- css.js
`-- [build]
|-- index.js
|-- style.build.css
`-- editor.build.css
In css.js:
import './block1/style.scss'
import './block1/editor.scss'
import './block2/style.scss'
import './block2/editor.scss'
In webpack.config.js:
const defaultConfig = require("./node_modules/@wordpress/scripts/config/webpack.config");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
...defaultConfig,
entry: {
index: path.resolve( process.cwd(), 'src', 'index.js' ),
css: path.resolve( process.cwd(), 'src', 'css.js' ),
},
optimization: {
...defaultConfig.optimization,
splitChunks: {
cacheGroups: {
style: {
name: 'style',
test: /style\.s?css$/,
chunks: 'all',
enforce: true,
},
editor: {
name: 'editor',
test: /editor\.s?css$/,
chunks: 'all',
enforce: true,
},
},
},
},
plugins: [
...defaultConfig.plugins,
new MiniCssExtractPlugin({
filename: 'blocks.[name].build.css'
}),
],
module: {
...defaultConfig.module,
rules: [
...defaultConfig.module.rules,
{
test: /\.s?css$/,
exclude: /node_modules/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader'
],
},
]
},
};
Output build folder:
[build]
|-- blocks.editor.build.css
|-- index.js
|-- blocks.style.build.css
|-- style.js (ignore)
|-- editor.js (ignore)
|-- css.js (ignore)
`-- (...and indentical map files)