Webpack Dev Server运行时bundle.js文件不更新问题求助

问题描述 #

已在webpack配置的output中设置publicPath，运行yarn webpack-dev-server修改TS代码时，终端显示重新编译成功，但磁盘中的public/bundle.js文件没有更新；执行yarn webpack命令时则能正常生成更新后的文件，排除路径配置问题，请问可能的原因及解决方法？

当前webpack配置：

const path = require("path");

module.exports = {
  mode: "development",
  entry: "./src/index.ts",
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: "ts-loader", 
        include: [path.resolve(__dirname, "src")],
      },
    ],
  },
  output: {
    publicPath: "public", 
    filename: "bundle.js", 
    path: path.resolve(__dirname, "public"), 
  },
};

依赖版本：

• ts-loader: 9.4.2
• typescript: 4.9.5
• webpack: 5.75.0
• webpack-cli: 5.0.1
• webpack-dev-server: 4.11.1

核心原因 #

webpack-dev-server默认将编译后的产物存储在内存中，不会写入你配置的output.path对应的磁盘目录。你看到的public/bundle.js其实是之前执行yarn webpack生成的旧文件，dev-server运行时的更新内容只存在于内存，不会覆盖磁盘文件——这是dev-server为提升热更新速度的设计逻辑。

解决方法 #

方法1：通过dev-server的HTTP服务访问更新后的资源 #

dev-server会在内存中搭建HTTP服务，你可以通过访问http://localhost:8080/public/bundle.js（默认端口8080，若修改过端口则对应调整）获取到更新后的bundle文件。同时确保HTML中引用bundle的路径与publicPath匹配，比如：

<script src="/public/bundle.js"></script>

（注意路径前的斜杠，避免相对路径导致的资源加载问题）

方法2：配置dev-server将产物写入磁盘 #

如果确实需要dev-server将编译后的文件同步写入磁盘，可以在webpack配置中添加devServer.writeToDisk选项：

const path = require("path");

module.exports = {
  mode: "development",
  entry: "./src/index.ts",
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: "ts-loader", 
        include: [path.resolve(__dirname, "src")],
      },
    ],
  },
  output: {
    publicPath: "public", 
    filename: "bundle.js", 
    path: path.resolve(__dirname, "public"), 
  },
  devServer: {
    writeToDisk: true // 开启后编译产物会写入output.path指定的磁盘目录
  }
};

开启该选项后，修改代码重新编译时，磁盘中的public/bundle.js就会同步更新。

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