webpack-dev-server监听src自动更新dist失效，求排查解决

核心原因 #

webpack-dev-server默认将打包产物存放在内存中，不会自动写入本地的dist目录，所以你修改代码后看不到dist/assets/bundle.js更新是默认行为。要实现自动更新本地dist文件，需要调整配置。

具体配置修正步骤 #

1. 修正webpack.config.js的output与publicPath
   确保publicPath配置符合浏览器访问路径（而非本地文件路径），示例如下：

   const path = require('path');
   
   module.exports = {
     mode: 'development',
     entry: './src/index.js',
     output: {
       filename: 'assets/bundle.js',
       path: path.resolve(__dirname, 'dist'), // 输出根目录指向dist
       publicPath: '/' // 匹配index.html中bundle.js的引用路径
     },
     watch: true,
     devServer: {
       static: {
         directory: path.resolve(__dirname, 'dist'), // 静态文件目录指向dist（因为index.html在dist下）
       },
       hot: true, // 可选：开启热模块替换，提升开发体验
       writeToDisk: true, // 关键：强制将打包产物写入本地dist目录
       watchFiles: ['src/**/*'] // 显式监听src下所有文件，确保改动被捕捉
     }
   };
   

2. 关键配置说明

   • devServer.static：必须指向包含index.html的dist目录，否则dev-server无法正确加载页面资源。
   • writeToDisk: true：这是让dist目录文件自动更新的核心配置，会让dev-server把内存中的打包结果同步写入本地硬盘。
   • publicPath：设置为/是因为你的index.html在dist根目录，引用bundle.js的路径是/assets/bundle.js，publicPath需匹配这个URL路径。

3. 优化package.json的scripts（可选）
   在package.json中添加dev命令，方便启动：

   {
     "scripts": {
       "dev": "webpack-dev-server"
     }
   }
   

验证步骤 #

运行npm run dev（或npx webpack-dev-server），修改src/index.js后，检查dist/assets/bundle.js，应该能看到文件已自动更新。

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