使用thread-loader搭配mini-css-extract-plugin时出现插件缺失报错

尝试将thread-loader与mini-css-extract-plugin配合使用，执行npm run build脚本时触发报错，报错信息提示未添加mini-css-extract-plugin插件，但实际Webpack配置中已正确引入该插件。

报错日志 #

> 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
• Node版本：v16.20.1
• NPM版本：8.19.4

解决方案 #

问题根源在于thread-loader会在独立的Worker线程中运行后续loader，而MiniCssExtractPlugin.loader需要与主进程中的插件实例通信，无法在Worker线程中获取到插件的存在，因此会报错。

需要调整loader的执行顺序，将MiniCssExtractPlugin.loader（或style-loader）放在thread-loader之前，让thread-loader仅负责处理需要编译计算的css-loader：

修改后的webpack.config.js中module.rules部分：

{
    test: /\.css$/,
    use: [
        isProd ? MiniCssExtractPlugin.loader : 'style-loader',
        {
            loader: 'thread-loader',
            options: threadPoolOptions,
        },
        {
            loader: 'css-loader',
            options: {
                modules: { localIdentName: '[path][local]' },
            },
        },
    ],
},

调整后，thread-loader仅对css-loader启用多线程处理，而负责提取CSS的MiniCssExtractPlugin.loader在主进程中执行，能够正常访问插件实例，解决报错问题。

内容的提问来源于stack exchange，提问作者Lin Du