首次配置Webpack报错：配置对象不符合API schema

错误原因及修复步骤： #

• 语法错误：主配置文件末尾多余分号
  你的webpack.config.js最后一行存在多余分号，导致配置对象语法不合法。
  原错误代码片段：

  };
  ;
  

  修复后：

  };
  

• 错误配置项：开发环境文件中的node字段
  在webpack.config.development.js里，你错误地将node设置为字符串"production"——Webpack的node选项用于配置Node.js环境模拟，不接受该值。此处你实际需要设置的是mode字段，指定当前为开发模式，同时补充output的filename（Webpack要求必须配置输出文件名）：
  原错误代码：

  module.exports = merge(config, {
    node: "production",
    output: {
      path: path.join(__dirname, "public"),
    },
  
    plugins: [new CleanWebpackPlugin()],
  });
  

  修复后：

  module.exports = merge(config, {
    mode: "development",
    output: {
      path: path.join(__dirname, "public"),
      filename: "[name].bundle.js"
    },
  
    plugins: [new CleanWebpackPlugin()],
  });
  

• 额外提示：SCSS文件未配置解析规则
  你的入口文件包含.scss文件，但当前配置未添加对应的解析loader，修复上述错误后仍会触发文件解析失败。需在主配置文件中添加module规则：

  module.exports = {
    // 其他已有配置...
    module: {
      rules: [
        {
          test: /\.scss$/,
          use: [
            IS_DEVELOPMENT ? "style-loader" : MiniCssExtractPlugin.loader,
            "css-loader",
            "sass-loader"
          ]
        }
      ]
    },
    // 其他已有配置...
  };
  

  同时需安装依赖：npm install style-loader css-loader sass-loader sass --save-dev

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