我之前帮不少开发者处理过这个场景的升级，给你整理了一套经过验证的步骤，一步步来就没问题：

1. 先更新核心依赖包 #

打开项目根目录的package.json，先把Webpack相关的核心包升级到4.x版本，注意版本兼容性：

# 安装Webpack 4和配套的cli工具（Webpack 4需要webpack-cli 3.x适配，别装最新版）
npm install webpack@4 webpack-cli@3 --save-dev

同时，更新那些和Webpack强绑定的插件、loader，避免版本冲突：

# 升级HTML插件、替换CSS提取插件（Webpack4不推荐用extract-text-webpack-plugin）
npm install html-webpack-plugin@4 mini-css-extract-plugin@0.8 --save-dev
# 升级Babel相关，确保和Webpack4兼容
npm install babel-loader@8 @babel/core @babel/preset-env @babel/preset-react --save-dev

2. 修改Webpack配置文件 #

ASP.NET Core React模板的Webpack配置一般在ClientApp/webpack.config.js里，需要做这些关键调整：

• 强制添加mode选项：Webpack4要求必须指定运行模式，直接在配置顶部加上：

  module.exports = {
    mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
    // ... 原有其他配置
  }
  

• 替换公共代码拆分插件：Webpack4移除了CommonsChunkPlugin，改用optimization.splitChunks，替换成这样：

  optimization: {
    splitChunks: {
      chunks: 'all',
      name: 'vendor'
    },
    runtimeChunk: true
  }
  

• 调整CSS加载逻辑：用mini-css-extract-plugin替换旧的CSS提取插件，修改rules和plugins部分：

  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  
  module.exports = {
    // ...
    module: {
      rules: [
        // ... 其他loader配置
        {
          test: /\.css$/,
          use: [
            // 开发环境用style-loader嵌入，生产环境提取成单独文件
            process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader',
            'css-loader'
          ]
        }
      ]
    },
    plugins: [
      // ... 其他插件
      new MiniCssExtractPlugin({
        filename: '[name].[contenthash].css'
      })
    ]
  }
  

• 检查devServer配置：Webpack4的devServer参数有简化，确保hot配置开启，和ASP.NET Core的代理逻辑兼容。

3. 调整Babel配置（可选但推荐） #

如果之前用的是旧版Babel（比如babel-core 6.x），在项目根目录创建.babelrc文件，统一配置：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

4. 测试验证 #

• 先清理旧依赖和缓存，重新安装：

  rm -rf node_modules package-lock.json
  npm install
  

• 启动开发服务器：运行dotnet watch run或者npm start，检查页面是否正常加载、热重载是否生效。
• 执行生产构建：运行npm run build，验证输出目录的静态资源是否生成正确，ASP.NET Core能否正常引用。

常见坑点排查 #

• 遇到Module not found：检查依赖包版本是否匹配，尤其是webpack-cli和webpack的版本对应。
• CSS样式不生效：确认生产环境用了mini-css-extract-plugin，开发环境用style-loader，路径配置正确。
• 热重载失效：检查devServer的hot是否设为true，webpack-dev-server版本是否适配Webpack4。

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