升级Node/npm项目后dist文件缺失致应用无法运行的问题排查

1. 修正源码目录与入口配置 #

你的源码在./public/app而非Webpack默认的./src，必须在webpack.config.js里明确指定入口路径，同时调整模块解析规则：

// webpack.config.js
module.exports = {
  entry: {
    app: './public/app/你的入口文件.js', // 替换成实际的app入口文件路径
    t: './public/app/t模块的入口.js' // 对应旧版的t.bundle.js入口
  },
  resolve: {
    modules: ['node_modules', './public/app'], // 让Webpack能识别public/app下的模块
    extensions: ['.js', '.html', '.css'] // 按需添加项目用到的文件后缀
  },
  // 其他配置...
};

2. 用splitChunks替代CommonsChunkPlugin生成vendor.bundle.js #

Webpack 5彻底移除了CommonsChunkPlugin，改用optimization.splitChunks来拆分第三方依赖包，配置如下：

// webpack.config.js
module.exports = {
  // ...其他配置
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/, // 匹配node_modules中的第三方依赖
          name: 'vendor', // 生成的bundle命名为vendor.bundle.js
          chunks: 'all'
        }
      }
    }
  }
};

该配置会自动将所有第三方依赖打包到单独的vendor文件中，实现旧版CommonsChunkPlugin的核心功能。

3. 配置CSS提取生成app.css #

旧版的extract-text-webpack-plugin在Webpack 5中不再兼容，改用mini-css-extract-plugin提取CSS为单独文件：
首先安装依赖：

npm install mini-css-extract-plugin css-loader --save-dev

然后修改webpack配置：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'] // 将CSS提取为独立文件
      }
      // 补充babel-loader处理JS的配置（按需调整）：
      // {
      //   test: /\.js$/,
      //   exclude: /node_modules/,
      //   use: 'babel-loader'
      // }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'app.css' // 生成的CSS文件名与旧版保持一致
    })
  ]
};

4. 调整package.json的构建脚本 #

确保构建命令指向正确的webpack配置文件：

// package.json
{
  "scripts": {
    "build": "webpack --mode production --config webpack.config.js"
  }
}

若webpack配置文件不在根目录，需修改--config后的路径。

关键提醒 #

• 禁止直接复制旧dist文件到新dist：Webpack 5的打包格式、模块解析逻辑与Webpack 1差异极大，混合新旧文件会导致模块引用错误，必须用新配置重新编译所有文件。
• 用html-webpack-plugin自动管理资源引用：手动修改index.html容易出现漏引或错引，安装插件自动处理：

  npm install html-webpack-plugin --save-dev
  

  添加到webpack配置：

  const HtmlWebpackPlugin = require('html-webpack-plugin');
  
  module.exports = {
    // ...其他配置
    plugins: [
      // ...已有的插件
      new HtmlWebpackPlugin({
        template: './public/index.html', // 你的原始index.html模板路径
        inject: true // 自动注入所有生成的bundle与CSS文件
      })
    ]
  };
  

  编译后dist目录会生成自动更新资源引用的index.html，无需手动修改。

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