Webpack 4.6.0配置mode属性出现未知属性错误，寻求解决方案

你遇到的问题核心是webpack-cli版本与Webpack 4的mode配置不兼容——虽然Webpack 4.6.0本身已经支持mode配置项，但你使用的webpack-cli 2.1.2是早期版本，还没完全适配Webpack 4新增的mode特性，所以才会抛出"unknown property 'mode'"的错误。

下面是几个可行的解决方案，按优先级排序：

1. 升级webpack-cli到兼容版本 #

这是最直接的解决办法，webpack-cli 3.x及以上版本才完全支持Webpack 4的mode配置。你可以通过以下命令升级：

npm install webpack-cli@3 --save-dev

注意：不要直接升级到webpack-cli 4+，它是为Webpack 5设计的，和Webpack 4会存在兼容性问题。

升级完成后，你就可以正常在配置文件里使用根级的mode属性了，比如：

// webpack.config.js
module.exports = {
  mode: 'development', // 或者 'production'
  entry: './src/index.js',
  // 其他配置项...
}

也可以在命令行里通过--mode参数指定环境：

# 开发环境构建
webpack --mode development
# 生产环境构建
webpack --mode production

2. 不升级cli的临时替代方案 #

如果暂时不想升级webpack-cli，你可以手动模拟mode的效果：

步骤1：在package.json的scripts里添加环境标识 #

{
  "scripts": {
    "dev": "webpack --env development",
    "build": "webpack --env production"
  }
}

步骤2：在webpack配置文件里根据环境变量配置优化项 #

把配置文件改成函数形式，接收env参数，手动设置生产/开发环境的优化逻辑：

// webpack.config.js
module.exports = (env) => {
  const isProduction = env === 'production';

  return {
    entry: './src/index.js',
    output: {
      filename: isProduction ? '[name].[contenthash].js' : '[name].js',
      path: __dirname + '/dist'
    },
    // 手动模拟mode效果：生产环境开启压缩，开发环境关闭
    optimization: {
      minimize: isProduction
    },
    // 按需配置source-map：开发环境用快速构建的，生产环境用隐藏的
    devtool: isProduction ? 'source-map' : 'eval-cheap-module-source-map'
  }
}

3. 检查配置文件结构是否正确 #

最后确认一下，你没有把mode属性嵌套在其他配置项里（比如output或module），mode必须是webpack配置的根级属性，否则也会被识别为未知属性。

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