Webpack多配置场景下如何搭配使用webpack-dev-server与nodemon-webpack-plugin

核心原因是webpack serve默认会将所有配置的构建产物存储在内存中不写入磁盘，导致nodemon-webpack-plugin无法读取到更新后的服务端构建文件，按照以下步骤修改即可：

方案1：保持多配置数组形式，最小改动 #

1. 调整Webpack配置 #

仅保留UI配置的devServer规则，给服务端配置添加devServer: false标识，同时配置devMiddleware.writeToDisk规则，将服务端产物强制写入磁盘：

module.exports = (env) => {
  const server = {
    // 其他原有配置
    externalsPresets: { node: true },
    externals: [nodeExternals({
      allowlist: [
        'crypto-random-string'
      ]
    })],
    // 新增：告诉webpack serve不要处理该配置的devServer逻辑
    devServer: false,
    // 确保服务端产物输出到磁盘的指定目录，比如dist/server
    output: {
      path: path.join(__dirname, 'dist', 'server'),
      filename: 'index.js'
      // 其他原有output配置
    },
    plugins: [
      // 可按需指定nodemon监听路径和启动入口
      new NodemonPlugin({
        script: path.join(__dirname, 'dist', 'server', 'index.js'),
        watch: path.join(__dirname, 'dist', 'server')
      })
    ]
  };

  const ui = {
    // 其他原有配置
    devServer: {
      historyApiFallback: true,
      port: 8080,
      static: {
        directory: path.join(__dirname, 'dist', 'ui')
      },
      // 新增：配置产物写入规则
      devMiddleware: {
        // 只有非UI目录的产物写入磁盘，UI产物保留在内存保证热更速度
        writeToDisk: (filepath) => !filepath.includes('ui')
      }
    },
    output: {
      path: path.join(__dirname, 'dist', 'ui'),
      // 其他原有output配置
    }
  };

  return [server, ui];
};

2. 保持原有启动命令不变 #

继续使用webpack serve启动即可，启动后：

• UI相关资源由webpack-dev-server处理，支持热重载，访问端口8080
• 服务端代码变更后会重新构建写入磁盘，nodemon检测到文件变更自动重启服务

方案2：拆分进程（更稳定的可选方案） #

如果不想混用多配置的devServer逻辑，可以拆分为两个独立进程分别处理服务端和UI的构建：

1. 调整Webpack配置，支持按环境变量返回对应配置 #

module.exports = (env) => {
  // 原有server、ui配置定义不变
  if (env.target === 'server') return server
  if (env.target === 'ui') return ui
  return [server, ui]
};

2. 安装进程管理工具concurrently #

npm i concurrently -D

3. 修改package.json启动脚本 #

{
  "scripts": {
    "dev:server": "webpack --watch --env target=server",
    "dev:ui": "webpack serve --env target=ui",
    "dev": "concurrently \"npm run dev:server\" \"npm run dev:ui\""
  }
}

4. 执行npm run dev即可同时启动两个构建流程，两者互不干扰。 #

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