如何查找webpack dev server发送给浏览器的bundle文件存储位置

核心原因 #

webpack-dev-server 为了提升热更新、编译的响应速度，默认会将编译生成的所有bundle产物存放在当前运行进程的内存中，不会写入本地磁盘。浏览器请求资源时服务端直接从内存返回对应内容，因此你在本地项目目录下无法找到对应的实体文件。

相关操作方案 #

• 若需要将产物写入本地磁盘，可以修改webpack配置文件的devServer字段，开启writeToDisk配置：

// webpack.config.js
module.exports = {
  // 其他基础配置：entry、output、module等
  devServer: {
    // 其余devServer配置（port、open等）
    writeToDisk: true
  }
}

• 产物写入本地的默认路径为项目根目录下的dist文件夹，你也可以通过修改output.path配置自定义存储路径：

const path = require('path')
module.exports = {
  output: {
    path: path.resolve(__dirname, 'your-custom-dir'), // 自定义产物目录
    filename: 'bundle.js'
  }
}

• 若不需要本地实体文件，仅需要查看bundle内容，直接在浏览器访问对应资源路径即可，例如默认地址为http://localhost:8080/bundle.js。

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