webpack-dev-server为何无法读取output.path指定目录下的bundle文件？

核心原因 #

webpack-dev-server 默认将打包后的文件存储在内存中，而非直接读取你手动修改的 dist 目录下的物理文件。哪怕你先通过 npx webpack 生成了 dist 文件并修改，启动 npx webpack serve 时，它会重新执行打包流程，将新的打包结果写入内存，访问时加载的是内存中的版本，而非你修改后的物理文件。

output.path 与 webpack-dev-server 的关系 #

你提到的「output.path 与 webpack-dev-server 无关」并不完全准确：

• output.path 是 webpack 执行常规打包（npx webpack）时，输出物理文件的目录；
• webpack-dev-server 运行时，不会直接使用 output.path 指向的物理文件，但会参考 output.publicPath 来确定内存中 bundle 的访问路径（也就是你配置的 /dev）；
• 只有当你将 devServer.static 配置为指向 output.path（即 dist 目录）时，devServer 才会同时提供该目录下的静态文件，但这和它内存中的打包文件是两个独立的资源来源。

解决办法 #

1. 遵循 devServer 正常工作流（推荐） #

不要手动修改 dist 目录下的 bundle 文件，直接修改 src 目录中的源码：

• 启动 npx webpack serve 后，devServer 会监听源码变化，自动重新打包并更新内存中的文件；
• 刷新页面或开启热模块替换后，就能看到最新的修改结果。

2. 让 devServer 读取物理 dist 文件（不推荐，影响性能） #

如果确实需要让 devServer 使用你手动修改的 dist 文件，可调整配置：

// webpack.config.js
module.exports = {
    // ... 其他配置
    devServer: {
        static: [
            path.resolve(__dirname, "./assets"),
            path.resolve(__dirname, "./dist") // 添加dist目录到静态资源服务
        ],
        devMiddleware: {
            writeToDisk: true // 让webpack将打包文件写入dist目录
        }
    }
}

• devMiddleware.writeToDisk: true 会让 webpack 将打包结果写入 dist 目录，而非仅存在内存；
• devServer.static 添加 dist 后，devServer 会优先提供该目录下的静态文件（包括你手动修改的内容）。

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