Webpack 在 mini-css-extract-plugin 加載程序上出錯

Question

當我嘗試將加載程序用於 mini-css-extract-plugin webpack 返回以下錯誤：

/node_modules/mini-css-extract-plugin/dist/loader.js:122
    for (const asset of compilation.getAssets()) {
                                    ^

    TypeError: compilation.getAssets(...) is not a function or its return value is not iterable

我需要插件並在我的產品配置文件中調用加載程序：

const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const path = require("path");
const common = require("./webpack.common");
const merge = require("webpack-merge");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = merge(common, {
  mode: "production",
  output: {
    filename: "[name].[contentHash].bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  plugins: [
    new MiniCssExtractPlugin({filename: "[name].[contentHash].css"}), 
    new CleanWebpackPlugin()
  ],
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader, //3. Extract css into files
          "css-loader", //2. Turns css into commonjs
          "sass-loader" //1. Turns sass into css
        ],
      },
    ],
  },
});

我將它包含在我的 devDependencies 中：

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

但我仍然收到錯誤。 我在 [documentation][1] 中沒有找到任何內容來表明可能發生的情況。 這段代碼有什么我忽略的嗎？

為什么 loader.js 中的方法會被標記為“不是 function？” [1]： https://www.npmjs.com/package/mini-css-extract-plugin

Answer 1

我了解 getAssets 僅在 webpack 4.40.0 https://webpack.js.org/api/compilation-object/#getassets 之后可用

你可以試試：

1. webpack版本更新到至少4.40.0
2. 將min-css-extract-plugin降級到1.3.0

我嘗試了第二個，並為我工作，但升級 webpack 也應該工作。