基于webpack-merge拆分配置后，entry热中间件的环境区分问题

嘿，这个坑我之前踩过！核心问题就是你把开发环境特有的热重载入口配置放到了公共的webpack.common.js里，导致生产环境也继承了这部分内容。咱们只需要把入口配置拆分一下，让热中间件只在开发环境生效就行，具体步骤如下：

1. 清理webpack.common.js的入口配置 #

先把公共配置里的入口改成纯业务代码的路径，去掉和热重载相关的内容：

// webpack.common.js
const path = require('path');

module.exports = {
  entry: {
    app: './src/index.js' // 只保留你的业务入口文件，不要加热中间件
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  // 其他公共配置（比如loader、插件的公共部分）...
};

2. 在webpack.dev.js中添加开发环境专属入口 #

用webpack-merge把公共配置和开发环境的入口合并，这里咱们把热中间件的客户端脚本加到开发环境的入口数组里：

// webpack.dev.js
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const webpack = require('webpack');

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  // 重写开发环境的入口，添加热中间件
  entry: {
    app: [
      'webpack-hot-middleware/client?reload=true', // 热重载客户端，加reload=true可在热重载失败时自动刷新页面
      // 把公共配置里的入口转成数组，避免重复写路径
      ...(Array.isArray(common.entry.app) ? common.entry.app : [common.entry.app])
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin() // 别忘了启用热替换插件
  ],
  // 其他开发环境专属配置...
});

3. 保持webpack.prod.js的纯净 #

生产环境的配置只需要合并公共配置，不用管入口——因为公共配置里的入口已经是纯业务代码了：

// webpack.prod.js
const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'production',
  devtool: 'source-map',
  // 其他生产环境专属配置（比如压缩插件、提取CSS等）...
});

额外提醒 #

还要确保你的开发服务器代码（比如用Express搭建的本地服务）只在开发环境加载webpack-dev-middleware和webpack-hot-middleware，生产环境不要引入这些中间件，避免多余的资源加载。

这样调整之后，开发环境会正常加载热重载的客户端脚本，生产环境的打包产物就不会包含这些冗余内容啦～

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