Webpack 在 mini-css-extract-plugin loader 上出错
Webpack erroring on mini-css-extract-plugin loader
当我尝试使用 mini-css-extract-plugin webpack 的加载程序时 returns 出现以下错误:
/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",
但我仍然收到错误。我没有在 [文档][1] 中找到任何可以表明可能发生的事情。这段代码有什么我忽略的地方吗?
为什么来自 loader.js 的方法会被标记为 'not a function?'
[1]: https://www.npmjs.com/package/mini-css-extract-plugin
我知道 getAssets 仅在 webpack 4.40.0 之后可用 https://webpack.js.org/api/compilation-object/#getassets
你可以试试:
- 将
webpack
版本至少更新到 4.40.0
- 将
min-css-extract-plugin
降级为 1.3.0
我试过第二个,对我有用,但升级 webpack 应该也能。
当我尝试使用 mini-css-extract-plugin webpack 的加载程序时 returns 出现以下错误:
/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",
但我仍然收到错误。我没有在 [文档][1] 中找到任何可以表明可能发生的事情。这段代码有什么我忽略的地方吗?
为什么来自 loader.js 的方法会被标记为 'not a function?' [1]: https://www.npmjs.com/package/mini-css-extract-plugin
我知道 getAssets 仅在 webpack 4.40.0 之后可用 https://webpack.js.org/api/compilation-object/#getassets
你可以试试:
- 将
webpack
版本至少更新到4.40.0
- 将
min-css-extract-plugin
降级为1.3.0
我试过第二个,对我有用,但升级 webpack 应该也能。