如何让 mini-css-extract-plugin 与 webpack 5 一起使用？答案

【问题标题】：How to get mini-css-extract-plugin to work with webpack 5?如何让 mini-css-extract-plugin 与 webpack 5 一起使用？
【发布时间】：2021-05-03 18:42:03
【问题描述】：

我正在尝试提取库中的 css 文件。我已经阅读了使用 mini-css-extract-plugin 的方法。

我做错了吗？还有其他方法可以为我的库提取 css 文件吗？

下面我使用https://webpack.js.org/plugins/mini-css-extract-plugin上提供的相同文件创建了一个简单的测试项目

以下示例在 webpack 5 中失败，但在 webpack 4 中运行良好。

style.css

body {
  background: green;
}

index.js

import './style.css';

package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "src/component.js",
  "dependencies": {},
  "devDependencies": {
    "css-loader": "^5.0.1",
    "mini-css-extract-plugin": "^1.3.5",
    "webpack": "^5.19.0",
    "webpack-cli": "^4.4.0"
  },
  "scripts": {
    "build": "webpack --config webpack.config.js"
  },
  "author": "",
  "license": "ISC"
}

webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: {
    index: './index.js'
  },
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
};

错误

$ npm run build

> test@1.0.0 build C:\Users\U708478\LAS\1CARI\Wells.Carina.Core.Blackbox\Web\test
> webpack --config webpack.config.js

assets by status 2.12 KiB [cached] 1 asset
runtime modules 657 bytes 3 modules
cacheable modules 60 bytes
  ./index.js 21 bytes [built] [code generated]
  ./style.css 39 bytes [built] [code generated] [1 error]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

ERROR in ./style.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
TypeError: The 'compilation' argument must be an instance of Compilation
    at getCompilationHooks (C:\Users\U708478\LAS\1CARI\Wells.Carina.Core.Blackbox\Web\test\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js:119:10)
    at C:\Users\U708478\LAS\1CARI\Wells.Carina.Core.Blackbox\Web\test\node_modules\webpack\lib\javascript\CommonJsChunkFormatPlugin.js:30:19
    at Hook.eval [as call] (eval at create (C:\Users\U708478\LAS\1CARI\Wells.Carina.Core.BlackBox\Web\test\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:5:1)
    at Hook.CALL_DELEGATE [as _call] (C:\Users\U708478\LAS\1CARI\Wells.Carina.Core.BlackBox\Web\test\node_modules\tapable\lib\Hook.js:14:14)
    at Compiler.newCompilation (C:\Users\U708478\LAS\1CARI\Wells.Carina.Core.BlackBox\Web\test\node_modules\webpack\lib\Compiler.js:992:30)
    at C:\Users\U708478\LAS\1CARI\Wells.Carina.Core.BlackBox\Web\test\node_modules\webpack\lib\Compiler.js:1035:29
    at Hook.eval [as callAsync] (eval at create (C:\Users\U708478\LAS\1CARI\Wells.Carina.Core.BlackBox\Web\test\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:4:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\U708478\LAS\1CARI\Wells.Carina.Core.BlackBox\Web\test\node_modules\tapable\lib\Hook.js:18:14)
    at Compiler.compile (C:\Users\U708478\LAS\1CARI\Wells.Carina.Core.BlackBox\Web\test\node_modules\webpack\lib\Compiler.js:1030:28)
    at Compiler.runAsChild (C:\Users\U708478\LAS\1CARI\Wells.Carina.Core.BlackBox\Web\test\node_modules\webpack\lib\Compiler.js:497:8)
 @ ./index.js 1:0-21

webpack 5.18.0 compiled with 1 error and 1 warning in 552 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! test@1.0.0 build: `webpack --config webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the test@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

【问题讨论】：

标签： mini-css-extract-plugin webpack-5

【解决方案1】：

将 mini-css-extract-plugin 更新到 webpack 5 仍在进行中：https://github.com/Automattic/wp-calypso/projects/100#card-51415407

【讨论】：

这个答案中的链接似乎与 mini-css-extract-plugin 无关

【解决方案2】：

mini-css-extract-plugin 现在与 Webpack 5 兼容，从 v2.0.0 开始

【讨论】：

【解决方案3】：

Webback 团队说：'请注意，如果您从 webpack 入口点导入 CSS 或在初始块中导入样式，mini-css-extract-plugin 不会将此 CSS 加载到页面中。请使用 html-webpack-plugin 自动生成链接标签或创建带有链接标签的 index.html 文件。

作为使 mini-css-extract-plugin 与您的 Webpack 5 项目一起使用的临时解决方案，我可能会建议尝试将您的“mini-css-extract-plugin”版本降低到 ^1.3.9。

【讨论】：