«Вы забыли добавить плагин «mini-css-extract-plugin» при работе с потоковым загрузчиком ⇐ CSS

[Anonymous]

Попробуйте использовать поток-загрузчик с плагином mini-css-extract-plugin. При запуске скрипта npm build возникла ошибка:

Код: Выделить всё

> 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

Код

Код: Выделить всё

// 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;
}

Код: Выделить всё

package.json

:

Код: Выделить всё

{
"version": "1.0.0",
"scripts": {
"build": "cross-env NODE_ENV=production webpack"
},
"devDependencies": {
"cross-env": "^7.0.3",
"css-loader": "^7.1.2",
"mini-css-extract-plugin": "^2.9.0",
"style-loader": "^4.0.0",
"thread-loader": "^4.0.2",
"webpack": "^5.80.0",
"webpack-cli": "^5.0.2"
}
}

• Операционная система: win11
• Версия узла: v16.20.1
• Версия NPM: 8.19.4

Создал минимальный воспроизводимый пример здесь: GitHub Repo


Подробнее здесь: https://stackoverflow.com/questions/786 ... read-loade