使用Node搭建Webpack项目模板时无法加载开发配置文件如何解决

• 拼写错误：webpack.config.js第8行将process.env错写为process.evn，导致process.evn为undefined，读取NODE_ENV属性时抛出类型错误，这是本次报错的直接原因。
• 基础配置未导出：当前webpack.config.js仅定义了变量，未通过module.exports导出公共配置对象，即使修复拼写错误，后续webpack-merge合并配置时会因拿到undefined抛出新错误。
• 缺少环境变量注入：package.json的执行命令中未注入NODE_ENV环境变量，即使拼写修复，IS_DEVELOPMENT判断逻辑也会始终返回false，不符合开发/生产环境区分的预期。
• 废弃参数使用：build命令中使用的-p参数在Webpack 5中已被废弃，会触发执行警告。

1. 修正拼写错误
   修改webpack.config.js第8行代码：

// 修正前
const IS_DEVELOPMENT = process.evn.NODE_ENV === 'dev'
// 修正后
const IS_DEVELOPMENT = process.env.NODE_ENV === 'dev'

2. 补全基础配置导出
   在webpack.config.js末尾补全公共配置的导出，参考示例如下（可根据你的实际项目需求调整loader、入口等配置）：

// 原有变量定义代码不变
module.exports = {
  entry: [
    path.join(dirApp, 'index.js'),
    path.join(dirStyles, 'index.scss')
  ],
  resolve: {
    modules: [dirApp, dirAssets, 'node_modules']
  },
  plugins: [
    new CopyWebpackPlugin({
      patterns: [{ from: './assets', to: '' }]
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    })
  ],
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
      // 其他资源loader按需补充
    ]
  }
}

3. 配置跨平台环境变量
   首先安装跨平台环境变量工具：
   npm install cross-env -D
   然后修改package.json的scripts字段，注入环境变量同时移除废弃的-p参数：

"scripts": {
  "build": "cross-env NODE_ENV=production webpack --progress --config webpack.config-build.js",
  "development": "cross-env NODE_ENV=dev webpack serve --progress --config webpack.config.development.js",
  "start": "npm run development"
}

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