React 15升级至18+后webpack-dev-server无法找到bundle.js求助

将React 15项目升级至React 18+并适配Node.js 16+，已修改package.json与webpack.common.js配置，但执行npm run start后浏览器提示bundle.js不存在，相关配置如下：

package.json #

{"name": "new-client-widget","version": "0.1.0","main": "app.js","scripts": {"start": "webpack-dev-server --config webpack.dev.js","build": "NODE_ENV='production' webpack --config webpack.prod.js","test": "jest --no-cache --watch"},"devDependencies": {"@babel/cli": "^7.14.8","@babel/core": "^7.14.8","@babel/plugin-syntax-dynamic-import": "^7.8.3","@babel/preset-react": "^7.14.5","@open-wc/webpack-import-meta-loader": "^0.4.7","babel-loader": "^8.2.0","babel-preset-env": "^1.6.1","babel-preset-react": "^6.24.1","compression-webpack-plugin": "^0.4.0","css-loader": "^6.8.1","empty-folder": "^2.0.1","extract-text-webpack-plugin": "^2.1.0","identity-obj-proxy": "^3.0.0","ify-loader": "^1.1.0","jest": "^29.6.1","jest-enzyme": "^4.2.0","jest-html-reporter": "^2.8.0","node-sass": "^9.0.0","react-test-renderer": "^18.2.0","redux-devtools-extension": "^2.13.2","sass-loader": "^6.0.5","style-loader": "^0.17.0","svg-url-loader": "^8.0.0","webpack": "^5.88.2","webpack-bundle-analyzer": "^4.9.0","webpack-cli": "^5.1.4","webpack-dev-server": "^4.15.1","webpack-merge": "^4.1.1","webpack-shell-plugin-next": "^2.3.1"},"dependencies": {"@babel/preset-env": "^7.22.9","@babel/preset-react": "^7.22.5","ajv": "^6.11.0","bootstrap": "^3.3.7","chartiq": "file:CIQ_Packages/chartiq-8.9.1.tgz","crypto-js": "^3.1.9-1","enzyme": "^3.11.0","enzyme-adapter-react-16": "^1.15.7","faye": "^1.2.4","file-loader": "^0.11.2","html-webpack-plugin": "^5.5.3","js-cookie": "^2.2.0","material-ui": "^0.15.0","moment": "^2.18.1","prop-types": "^15.5.10","react": "^18.2.0","react-bootstrap": "^0.31.2","react-data-grid": "^3.0.11","react-data-grid-addons": "^3.0.11","react-dom": "^18.2.0","react-paginate": "^5.0.0","react-plotly.js": "^2.1.0","react-redux": "^5.0.5","react-router-dom": "^4.2.2","react-select": "^2.4.4","react-tabs": "^2.1.1","react-tooltip": "^3.5.0","redux": "^3.7.2","redux-thunk": "^2.2.0","remove": "^0.1.5","short-uuid": "^2.3.4","superagent": "^3.8.1","url-loader": "^4.1.1"}}

webpack.common.js #

var path = require("path");var webpack = require("webpack");

module.exports = {mode: "development",entry: {bundle: path.join(__dirname, "src", "js/main.js"),},output: {path: path.resolve(__dirname, "dist"),filename: "bundle.js",publicPath: "/dist",},devServer: {host: "0.0.0.0",port: 8080,},resolve: {extensions: [".js", ".jsx", ".json"],},stats: {colors: true,reasons: true,chunks: true,},module: {rules: [{test: /\.(js|jsx)$/,exclude: /node_modules/,use: {loader: "babel-loader",options: {presets: ["@babel/preset-react", "@babel/preset-env"],},},},{test: /\.jsx$/,use: "ify-loader",},{test: /\.svg$/,use: "svg-url-loader",},{test: /\.scss$/,use: "sass-loader",},
      {test: /\.css$/,use: "style-loader!css-loader",},{test: /\.png$/,use: "url-loader?limit=100000",},{test: /\.jpg$/,use: "file-loader",},{test: /\.html$/,use: "file-loader?name=client_widget/[name].[ext]",},{test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,use: "file-loader?name=client_widget/fonts/[name].[ext]",},{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,use: "file-loader?name=client_widget/fonts/[name].[ext]",},{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,use: "file-loader?name=client_widget/fonts/[name].[ext]",},],},plugins: [new webpack.IgnorePlugin({resourceRegExp: /\.\/native/,contextRegExp: /\/pg\//,}),],};

• 清理依赖冲突：package.json里同时存在多版本的Babel预设，比如babel-preset-react有6.x和7.x、babel-preset-env有1.x和7.x，这些冲突会直接导致编译异常。删掉devDependencies里的旧版本babel-preset-env@1.6.1和babel-preset-react@6.24.1，只保留@babel/preset-env和@babel/preset-react即可。
• 修复Loader版本兼容问题：
  • sass-loader@6.0.5和node-sass@9.0.0版本不匹配，建议把sass-loader升级到13.x以上，或者直接替换node-sass为sass（dart-sass，node-sass已停止维护）。
  • style-loader@0.17.0和css-loader@6.8.1版本不兼容，升级style-loader到3.x以上，同时把css-loader的写法从style-loader!css-loader改成数组形式：["style-loader", "css-loader"]，符合webpack 5的规范。
• 完善devServer配置：webpack-dev-server v4必须配置static字段指定静态文件目录，否则无法正确映射内存中的bundle资源。在devServer里添加：

  static: {
    directory: path.join(__dirname, 'public'), // 替换成你的HTML文件所在目录
    publicPath: '/dist'
  }
  

  同时确认HTML里引用bundle.js的路径是/dist/bundle.js，和publicPath保持一致。
• 启用HtmlWebpackPlugin：依赖里已经装了html-webpack-plugin，但配置里没启用。添加这个插件可以自动生成带正确bundle路径的HTML，避免手动写路径出错：

  const HtmlWebpackPlugin = require('html-webpack-plugin');
  // 在plugins数组中添加
  new HtmlWebpackPlugin({
    template: './public/index.html' // 替换成你的HTML模板路径
  })
  

• 验证入口文件路径：确认src/js/main.js真实存在，没有拼写错误（比如大小写、目录层级错误）。
• 检查webpack.dev.js的合并逻辑：确保webpack.dev.js用webpack-merge正确合并了webpack.common.js的配置，没有覆盖output、publicPath这些关键字段。示例写法：

  const { merge } = require('webpack-merge');
  const common = require('./webpack.common.js');
  
  module.exports = merge(common, {
    mode: 'development',
    devtool: 'inline-source-map',
    // 其他开发环境专属配置
  });
  

• 清理缓存重装依赖：执行rm -rf node_modules package-lock.json，再跑npm install，避免旧依赖缓存导致的编译问题。

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