您忘记添加“mini-css-extract-plugin”插件

Question

我在我的 webpack 版本 1.3.6 中使用 mini-css-extract-plugin 但在尝试运行 dev build 时出现以下错误。 css 和 scss 都在应用程序中。

./src/index.css 中出现错误 模块构建失败（来自 ./node_modules/mini-css-extract-plugin/dist/loader.js）： 错误：您忘记添加 'mini-css-extract-plugin' 插件（即 { plugins: [new MiniCssExtractPlugin()] }），请阅读 https://github.com/webpack-contrib/mini-css-extract-plugin#getting-

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = ({ mode } = { mode: "production" }) => {
  console.log(`mode is: ${mode}`);

  return {
    mode,
    entry: "./src/index.tsx",
    output: {
      publicPath: "/",
      path: path.resolve(__dirname, "build"),
      filename: "bundle.js",
    },
    resolve: {
      extensions: [".js", ".jsx", ".css", ".scss", ".ts", ".tsx"],
    },
    module: {
      rules: [
        {
          test: /\.(gif|png|jpe?g|svg)$/i,
          use: [
            {
              loader: "image-webpack-loader",
            },

            "url-loader?limit=100000",
          ],
          // type: 'asset/inline'
        },
        {
          test: /\.(css)$/,
          use: [
            MiniCssExtractPlugin.loader,
            {
              loader: "css-loader",
            },
          ],
        },
        {
          test: /\.(sass|scss)$/,
          use: [
            {
              loader: "file-loader",
              options: {
                name: "[name].css",
                outputPath: "css",
                esModule: false,
              },
            },
            {
              loader: "css-loader",
              options: {
                importLoaders: 1,
                modules: { auto: true },
              },
            },
            {
              loader: "sass-loader",
              options: {
                webpackImporter: true,
              },
            },
          ],
        },

        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          loader: "babel-loader",
        },
        {
          test: /\.(ts|tsx)$/,
          use: [
            {
              loader: "ts-loader",
              options: {
                transpileOnly: true,
              },
            },
          ],
          exclude: /node_modules/,
        },
      ],
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: "./public/index.html",
        favicon: "./public/favicon.ico",
      }),
 new MiniCssExtractPlugin({
        linkType: "text/css",
      }),
    ],
    devServer: {
      open: true,
    },
  };
};

package.json

"devDependencies": {
    "@babel/core": "^7.17.5",
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-react": "^7.16.7",
    "babel": "^6.23.0",
    "babel-loader": "^8.1.0",
    "babel-plugin-lodash": "^3.3.4",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
    "css-loader": "^5.2.7",
    "extract-loader": "^5.1.0",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^4.0.0",
    "image-webpack-loader": "^8.1.0",
    "mini-css-extract-plugin": "^1.3.6",
    "node-sass": "6.0.1",
    "postcss-loader": "^6.2.1",
    "sass-loader": "^10.1.1",
    "style-loader": "^2.0.0",
    "ts-loader": "^8.2.0",
    "url-loader": "^4.1.1",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^3.11.1"
  }