运行npm start时Webpack5报配置含未知modules属性错误如何解决

问题解决方法 #

错误根源 #

你的webpack配置文件出现了拼写错误：webpack根配置中定义loader规则的属性名是module，你写成了复数形式modules，这和webpack的API schema不匹配，直接触发了配置校验报错。

修正方案 #

把webpack.config.js里的modules字段改为module即可，修正后的完整配置如下：

const path = require("path");
module.exports = {
    mode: "development",
    entry: "./src/index.js",
    output: {
        filename: "main.js",
        path: path.resolve(__dirname, "dist")
    },
    // 原配置此处为modules，删除末尾多余的s即可
    module: {
        rules: [
            { 
                test: /\.css$/i,
                use: ["style-loader", "css-loader"],            
            },
        ],
    },
};

验证 #

修改保存后重新运行npm start即可正常启动项目，其余的loader配置、依赖版本都没有问题。

内容的提问来源于stack exchange，提问作者Rodrigo Rivera