该文章仅供自己记录。

 官方文档GitHub - webpack-contrib/mini-css-extract-plugin: Lightweight CSS extraction plugin

供配置参考。

错误内容：

Error: 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

原因，我一开始的mini-css-extract-plugin版本为

"mini-css-extract-plugin": "^2.4.5",

而webpack的版本为

"webpack": "^5.75.0",

"webpack-cli": "^5.0.1",

"webpack-dev-server": "^4.11.1"

我查找了很多博客都没有找到原因，我怀疑是版本不匹配，webpack版本过高。

所以我将mini-css-extract-plugin版本更新到目前最新即

"mini-css-extract-plugin": "^2.7.2",

然后使用官方文档的配置

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

即可成功build。

其次，如果没有安装相关插件，代码段

rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],

可能会因为"//"在css中不是正确的注释方法而显示无法识别的符号而报错，删掉这一段也可成功build。