求助:
webpack 5.17 使用 mini-css-extract-plugin报错,希望能有大佬帮帮我 T^T
安装
npm i mini-css-extract-plugin -D // 官网的安装方法
文件目录
配置文件
const {resolve} = require(‘path‘);
const htmlPacker = require(‘html-webpack-plugin‘);
const miniCss = require(‘mini-css-extract-plugin‘);
module.exports = {
mode:"development",
entry:{
index:‘./src/index.js‘
},
output:{
filename:"[name].js",
// path: resolve(__dirname,"build"),
path: "./build",
},
// 只能生成js
module:{
rules:[
// { // loader: "style-loader" 使用单个loader
// // 用正则表达式寻找所有css结尾的文件进行打包
// test: /\.css$/,
// /* css-loader将css打包到index.js中, style-loader把css打包到html */
// // 和html的plugin一样,相对于加载顺序逆向写
// use:["style-loader", "css-loader"],
// },
{ // loader: "style-loader" 使用单个loader
// 用正则表达式寻找所有css结尾的文件进行打包
test: /\.css$/,
/* miniCss会生成单独的css文件并且让它被html引用 */
use:[miniCss.loader, "css-loader"],
},
{
test: /\.less$/,
use: ["style-loader", "css-loader","less-loader"]
},
{
test: /\.scss$/,
use: ["style-loader", "css-loader","sass-loader"]
}
]
},
// 可以生成其他类型文件
plugins:[
new htmlPacker({
template:"./src/index.html",
filename: "res.html",
minify: {
collapseWhitespace: true,
}
}),
new miniCss(
),
]
}
报错
ERROR in ./src/style.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
TypeError: The ‘compilation‘ argument must be an instance of Compilation
at getCompilationHooks (F:\webpack\demo1\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js:119:10)
at F:\webpack\demo1\node_modules\webpack\lib\javascript\CommonJsChunkFormatPlugin.js:30:19
at Hook.eval [as call] (eval at create (C:\Users\dosli\AppData\Roaming\npm\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:7:1)
at Hook.CALL_DELEGATE [as _call] (C:\Users\dosli\AppData\Roaming\npm\node_modules\webpack\node_modules\tapable\lib\Hook.js:14:14)
at Compiler.newCompilation (C:\Users\dosli\AppData\Roaming\npm\node_modules\webpack\lib\Compiler.js:992:30)
at C:\Users\dosli\AppData\Roaming\npm\node_modules\webpack\lib\Compiler.js:1035:29