Angular 12配置extra-webpack.config报错：未知属性'rules'

错误原因 #

你在webpack配置的根级别直接定义了rules属性，但从Webpack 2.x版本开始，所有loader规则必须嵌套在module对象下的rules数组中，根配置节点不存在rules这个合法字段，因此触发了配置schema校验错误。

正确配置方式 #

修改你的extra-webpack.config.js文件，将rules数组包裹到module对象内，具体代码如下：

const webpack = require('webpack');

module.exports = {
    /**
     * Remove all unused MomentJS locales
     */
    plugins: [
        new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /de|en|fr|it/),
    ],
    module: {
        rules: [
            {
                include: /node_modules/,
                test: /\.mjs$/,
                type: 'javascript/auto'
            },
        ]
    }
}

说明 #

Angular 12配合自定义webpack构建工具使用额外配置时，该配置会与Angular CLI生成的主webpack配置合并。将规则放在module.rules下，符合Webpack官方配置规范，能被正确识别并应用。

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