生产环境Webpack require未定义错误及配置、热重载问题排查

1. 修复生产环境require is not defined错误 #

这个错误是因为开发环境的热重载中间件代码被打包到生产环境中了。webpack-hot-middleware/client是仅用于开发环境的依赖，生产环境完全不需要引入它。

解决步骤：

• 拆分Webpack配置为开发/生产两个版本，或者通过process.env.NODE_ENV变量区分环境
• 仅在开发环境的entry数组中添加webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000，生产环境直接使用业务代码入口
• 生产环境下强制设置mode: production，让Webpack自动剔除开发环境冗余代码

示例配置片段：

const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
  mode: isProduction ? 'production' : 'development',
  entry: isProduction 
    ? './src/index.js' 
    : ['webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000', './src/index.js'],
  // 其他配置项...
};

同时在Express服务中，仅在开发环境加载热重载中间件：

if (process.env.NODE_ENV !== 'production') {
  const webpack = require('webpack');
  const webpackConfig = require('./webpack.config.js');
  const compiler = webpack(webpackConfig);
  app.use(require('webpack-dev-middleware')(compiler, {
    publicPath: webpackConfig.output.publicPath
  }));
  app.use(require('webpack-hot-middleware')(compiler));
}

2. Webpack配置的错误/缺失项 #

• 未区分环境配置：当前配置把开发工具（热重载、source map等）全量打包到生产环境，导致冗余代码和运行时错误
• 缺少HtmlWebpackPlugin：没有用该插件处理HTML文件，既无法自动注入打包后的JS/CSS资源，也无法支持HTML热重载
• 生产环境未开启优化：未设置mode: production，Webpack不会自动执行代码压缩、树摇、死代码剔除等生产优化
• 可能未配置output.publicPath：如果资源路径配置错误，生产环境会出现静态资源加载失败的问题

3. 开启HTML文件热重载 #

要实现HTML修改后自动刷新页面，需要以下配置：

1. 安装依赖：

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

2. 在Webpack配置中引入并配置插件：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
  // ...其他配置
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // 你的HTML模板路径
      filename: 'index.html'
    }),
    // 仅开发环境启用热重载插件
    ...(isProduction ? [] : [new webpack.HotModuleReplacementPlugin()])
  ],
  // 若使用webpack-dev-server，添加以下配置监听静态文件
  devServer: {
    hot: true,
    watchContentBase: true,
    contentBase: './dist'
  }
};

3. 确保Express服务在开发环境下，从Webpack打包输出的dist目录读取静态文件，而非直接读取源码目录的HTML文件。

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