求助:webpack5.17 以及 插件 mini-css-extract-plugin

求助:

webpack 5.17 使用 mini-css-extract-plugin报错,希望能有大佬帮帮我 T^T

安装
npm i mini-css-extract-plugin -D // 官网的安装方法
文件目录

求助:webpack5.17 以及 插件 mini-css-extract-plugin

配置文件
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

求助:webpack5.17 以及 插件 mini-css-extract-plugin

上一篇:小白年薪24万,为什么Linux运维工程师薪资这么高?


下一篇:atitit.二维码生成总结java zxing