You forgot to add 'mini-css-extract-plugin' pluginΒ #213
Description
- Operating System: win11
- Node Version: v16.20.1
- NPM Version: 8.19.4
- webpack Version: ^5.80.0
- thread-loader Version: ^4.0.2
Expected Behavior
Should work with mini-css-extract-plugin
Actual Behavior
> cross-env NODE_ENV=production webpack
assets by status 958 bytes [cached] 1 asset
runtime modules 663 bytes 3 modules
cacheable modules 113 bytes
./src/index.js 74 bytes [built] [code generated]
./src/styles.css 39 bytes [built] [code generated] [1 error]
ERROR in ./src/styles.css
Module build failed (from ./node_modules/thread-loader/dist/cjs.js):
Thread Loader (Worker 0)
You forgot to add 'mini-css-extract-plugin' plugin (i.e. `{ plugins: [new MiniCssExtractPlugin()] }`), please read https://github.com/webpack-contrib/mini-css-extract-plugin#getting-started
at Object.pitch (D:\workspace\mrdulin\webpack-samples\webpack-v5\examples\thead-loader-and-mini-css-extract-plugin-issue\node_modules\mini-css-extract-plugin\dist\loader.js:89:14)
@ ./src/index.js 1:0-34 2:28-34
webpack 5.88.2 compiled with 1 error in 373 ms
Code
// webpack.config.js
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const os = require('os');
const threadPoolOptions = {
workers: os.cpus().length - 1,
};
const isProd = process.env.NODE_ENV === 'production';
module.exports = {
mode: 'production',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
clean: true,
},
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: 'thread-loader',
options: threadPoolOptions,
},
isProd ? MiniCssExtractPlugin.loader : 'style-loader',
{
loader: 'css-loader',
options: {
modules: { localIdentName: '[path][local]' },
},
},
],
},
],
},
plugins: [new MiniCssExtractPlugin()],
};index.js:
import styles from './styles.css';
console.log('π ~ styles:', styles);styles.css:
.f12 {
font-size: 12px;
}How Do We Reproduce?
Run npm run build script