Webpack devServer运行后未生成dist输出文件的原因是什么？

1. 为什么项目文件夹下没有生成dist目录 #

webpack-dev-server 默认将所有编译产物（包括JS、html-webpack-plugin生成的HTML等）全部存在内存中，不会写入本地磁盘，所以你本地看不到dist文件夹是正常现象，和路径配置无关。如果你需要让产物写入磁盘，可以在devServer配置中加writeToDisk: true。

2. 你的配置确实存在错误 #

你修改后的output.path和devServer.contentBase配置都有绝对路径指向错误：

• path.resolve(__dirname, '/dist/')：Node.js的path.resolve方法遇到以/开头的绝对路径参数时，会忽略前面的所有路径拼接逻辑，直接返回/dist/，也就是你系统根目录下的dist文件夹，而非当前项目目录下的dist。
• path.join(__dirname, '/dist/')同理，path.join遇到/开头的路径段也会直接跳到根目录，最终指向的也是系统根目录下的dist文件夹。

修正后的正确配置如下：

output: {
  path: path.resolve(__dirname, 'dist') // 去掉路径开头的/，相对当前项目目录拼接
},
devServer: {
  contentBase: path.join(__dirname, 'dist'), // 同样去掉开头的/
  open: true,
  // 可选：需要写入磁盘的话加下面这行
  // writeToDisk: true
  // ...
}

3. html-webpack-plugin的输出逻辑 #

html-webpack-plugin的输出是跟随webpack主编译流程走的：

• 使用webpack-dev-server时，生成的HTML会和其他产物一起存到内存中，由devServer直接提供访问，不会写入任何本地文件夹（包括临时文件夹）。
• 只有当你执行正常的webpack编译命令（而非启动devServer）或者开启了devServer的writeToDisk配置时，才会把生成的HTML写入到output.path配置的路径下。

内容的提问来源于stack exchange，提问作者NeoZoom.lua