Webpack Dev Server初始化报错：配置对象不符合API Schema

问题场景 #

执行npm run dev启动Webpack Dev Server时触发配置验证错误，报错提示Webpack配置对象不符合API Schema。该配置在笔记本上运行正常，但台式机上报错，且已确认两台设备都安装了所有依赖包。

完整报错信息 #

- configuration.module.rules[1].use should be one of these:
   non-empty string | function | object { ident?, loader?, options?, query? } | function | [non-empty string | function |
 object { ident?, loader?, options?, query? }]
   -> Modifiers applied to the module when rule is matched
   Details:
    * configuration.module.rules[1].use[0] should be a string.
    * configuration.module.rules[1].use[0] should be an instance of function
    * configuration.module.rules[1].use[0] should be an object.
    * configuration.module.rules[1].use[0] should be one of these:
      non-empty string | function | object { ident?, loader?, options?, query? }
    * configuration.module.rules[1].use[0] should be one of these:
      non-empty string | function | object { ident?, loader?, options?, query? }
      -> An use item

现有Webpack配置文件 #

const path = require("path");
const extractCssPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

const JS_DIR = path.resolve(__dirname, "js");
const BUILD = path.resolve(__dirname, "build");

// Entry point of our JS
entry = {
    main: JS_DIR + "main.js",
};

// Entry point of the output
output = {
    path: BUILD,
    filename: 'js/[name].js'
};

// Rules for the webpack

const rules = [

    // Rule for the JavaScript
    {
        test: /\.js$/,
        include: [ JS_DIR ],
        exclude: /node_modules/,
        use: 'babel-loader' 
    },

    // Rule for the scss
    {
        test: /\.scss$/,
        exclude: /node_modules/,
        use: [
            extractCssPlugin.load,
            "css-loader"
        ] 
    },

    // Rule for the images
    {
        test: /\.(png|jpg|jpeg)$/,
        use: [
            {
                loader: "file-loader",
                options: {
                    name: "[path][name].[ext]",
                    publicPath: ( process.env.NODE_ENV === "production" ) ? "../" : "../../"
                }
            }
        ] 
    }
]


// Defining the plugins 

const plugins = argv => {
    return [
        new CleanWebpackPlugin({
            cleanStaleWebpackAssets: argv.mode === "production"
        }),
        new extractCssPlugin({
            filename: "css/[name].css"
        })
    ]
}

module.exports = ( env, argv ) => {
    return {
        entry: entry,
        output: output,
        module: {
            rules: rules
        },
        plugins: plugins( argv )
    }
}

问题原因与修复方案 #

核心错误 #

SCSS规则中的extractCssPlugin.load是拼写错误，正确写法应为extractCssPlugin.loader。Webpack要求use数组中的每一项必须是字符串、函数或符合规范的对象，错误的load属性不存在，导致配置不符合Schema要求。

跨设备表现差异的原因 #

两台设备上mini-css-extract-plugin版本不一致：

• 笔记本上的版本较低，对错误写法有兼容处理，未触发报错
• 台式机上的版本较新，严格遵循Webpack配置API规范，因此直接抛出验证错误

修复后的SCSS规则代码 #

将SCSS规则中的extractCssPlugin.load替换为extractCssPlugin.loader即可解决问题：

// Rule for the scss
{
    test: /\.scss$/,
    exclude: /node_modules/,
    use: [
        extractCssPlugin.loader,
        "css-loader"
    ] 
}

内容的提问来源于stack exchange，提问作者Hashim Abbas