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


求助:

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM