如何解决 webpack 报错：You forgot to add 'mini-css-extract-plugin' plugin

2022-11-19 00:50:06

避免“忘记添加 'mini-css-extract-plugin' 插件”错误：CSS 提取和打包指南

在使用 webpack 进行 Web 开发时，有时你会遇到臭名昭著的错误：“忘记添加 'mini-css-extract-plugin' 插件”。此错误表明你没有在 webpack 配置文件中正确配置 CSS 提取和打包。为了解决这个问题，本文将深入探讨该插件的用法以及常见的错误解决方法。

什么是 mini-css-extract-plugin 插件？

mini-css-extract-plugin 是一个 webpack 插件，负责从 JavaScript 代码中提取 CSS 代码并将其打包成单独的文件。这样做的好处是显而易见的：它可以提高 CSS 文件的加载速度，并使你的代码结构更加清晰易懂。

如何解决“忘记添加 'mini-css-extract-plugin' 插件”错误？

解决此错误很简单，分以下步骤进行：

安装 mini-css-extract-plugin 插件

npm install --save-dev mini-css-extract-plugin

在 webpack 配置文件中添加插件

在 plugins 数组中添加以下内容：

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

module.exports = {
  plugins: [
    new MiniCssExtractPlugin(),
  ],
};

配置 CSS 加载器

在 module.rules 中添加以下内容：

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

重新运行 webpack

重新运行 webpack，错误应该消失了。

常见问题解答

为什么需要 mini-css-extract-plugin 插件？

mini-css-extract-plugin 插件有助于提高加载速度和代码可读性。
如何使用 mini-css-extract-plugin 插件？

在 webpack 配置文件中添加插件并配置 CSS 加载器。
使用 mini-css-extract-plugin 插件有什么注意事项？

确保安装插件并正确配置 webpack 文件。
如何避免“忘记添加 'mini-css-extract-plugin' 插件”错误？

遵循上述步骤并在 webpack 配置文件中添加插件。
如果我仍然遇到错误怎么办？

仔细检查你的配置，确保已正确安装和配置插件。