生产服务器中Webpack加载旧内容问题求助

问题 #

使用Webpack构建React组件，执行构建命令：

./node_modules/.bin/webpack --config webpack.config.js --mode=production

构建无报错，成功生成bundle文件。但部署到生产服务器后，浏览器开发者工具Sources标签下显示的仍是旧内容：比如已经在store.js中移除所有console.log，但浏览器里查看该文件仍存在这些日志；但在生产服务器用vim打开对应文件，确认已无console.log且文件路径正确，同时已排除浏览器缓存问题（首次在Safari打开也出现该情况）。

以下是webpack.config.js配置：

const webpack = require("webpack");
const path = require("path");
const UglifyJSPlugin = require("uglifyjs-webpack-plugin");
const eslintFormatter = require("react-dev-utils/eslintFormatter");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
  .BundleAnalyzerPlugin;

module.exports = function (env = {}, mode) {
  const plugins = [];

  if (env["bundle-size"]) {
    plugins.push(new BundleAnalyzerPlugin());
  }

  if (mode === "production") {
    plugins.push(
      // minify remove some of the dead code
      new UglifyJSPlugin({
        compress: {
          warnings: false,
        },
        output: {
          comments: false,
        },
        sourceMap: true,
      })
    );
  }

  return {
    devtool: "source-map",
    entry: {
      myResults: path.join(__dirname, "./scripts/Results/index.jsx"),
    },
    performance: {
      hints: false,
    },
    stats: {
      modules: false,
    },
    output: {
      path: path.join(__dirname, "../html/assets/scripts/react"),
      publicPath: "/assets/scripts/react/",
      filename: "[name].js",
      chunkFilename: "[name].chunk.js",
    },
    resolve: {
      extensions: [".js", ".json", ".jsx"],
    },
    module: {
      strictExportPresence: true,
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          loader: "babel-loader",
        },
      ],
    },
    plugins: plugins,
    node: {
      fs: "empty",
      net: "empty",
      tls: "empty",
    },
  };
};

可能的原因与解决办法 #

• Source Map 未同步更新：当前配置启用了source-map，构建时会生成对应的.map文件。如果部署时只更新了bundle文件，未同步更新.map文件，浏览器会通过旧的source map映射到旧代码内容。解决：部署时同步上传生成的.map文件，或者在生产环境改用更轻量的source map类型（如cheap-module-source-map），同时确保构建后清理旧的map文件再部署。

• 文件名无哈希导致服务器/CDN缓存：当前输出文件名是[name].js，未添加内容哈希。即使更新了文件，服务器或CDN可能仍返回缓存的旧文件（即使浏览器首次打开，服务器端缓存也可能生效）。解决：修改output的文件名规则，添加内容哈希，示例：

  filename: "[name].[contenthash].js",
  chunkFilename: "[name].[contenthash].chunk.js"
  

  内容变更时文件名会自动更新，彻底避免缓存问题，同时要确保HTML引用的是新生成的文件名。

• 构建产物未完全覆盖旧文件：部署过程中可能因权限问题、脚本逻辑漏洞，导致旧bundle文件未被完全覆盖。解决：检查部署脚本是否完整上传了构建目录下的所有文件，验证服务器上文件的修改时间是否与构建时间一致，必要时手动删除旧文件后重新上传。

• 压缩插件配置缺失：当前UglifyJSPlugin未配置移除console.log的规则，且Webpack 4+在production模式下默认启用TerserPlugin，手动引入UglifyJSPlugin可能存在冲突。解决：移除UglifyJSPlugin，改用默认的TerserPlugin配置，在webpack配置中添加：

  optimization: {
    minimizer: [
      new require('terser-webpack-plugin')({
        terserOptions: {
          compress: {
            drop_console: true
          }
        }
      })
    ]
  }
  

  确保生产构建时自动移除所有console语句。

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