webpack-dev-server不写入public目录及与Express配合的配置疑惑

为什么public目录始终为空？ #

webpack-dev-server 默认采用内存编译模式——编译后的所有产物都存在内存里，不会写入本地磁盘。你配置的static目录只是告诉服务器从哪里读取已有的静态资源（比如手动放在public里的图片、字体），但webpack编译出来的JS、CSS等文件并不会被写入这个目录。

这种设计是为了提升开发效率：内存读写速度远快于磁盘，修改代码后的热更新响应时间更短，避免频繁磁盘IO带来的性能损耗。

开发阶段如何让文件生成到public目录？ #

如果一定要在开发阶段让编译产物写入本地public目录，有几种可行方案：

方案1：开启webpack-dev-server的磁盘写入功能 #

在你的webpack.config.development.js的devServer配置中添加writeToDisk字段：

module.exports = {
  // 其他开发环境配置...
  devServer: {
    static: './public',
    writeToDisk: true, // 强制将编译产物写入磁盘
    // 可选：可以指定只写入特定文件，比如 /\.html$/
    // writeToDisk: (filePath) => /\.html$/.test(filePath)
  },
};

注意：开启后热更新速度会略有下降，因为每次编译都要执行磁盘写入操作，但能满足你本地生成文件的需求。

方案2：用webpack watch模式替代webpack-dev-server #

如果不需要dev-server的热更新、自动刷新等特性，或者希望完全控制文件生成流程，可以直接使用webpack的watch模式：

1. 在package.json中添加开发脚本：

{
  "scripts": {
    "dev:watch": "webpack --watch --config webpack.config.development.js"
  }
}

2. 确保webpack配置的输出目录指向public：
   在webpack.config.development.js的output字段设置路径：

const path = require('path');

module.exports = {
  output: {
    path: path.resolve(__dirname, 'public'), // 编译产物输出到public目录
    filename: '[name].bundle.js',
    clean: true, // 每次编译前清空目录（可选）
  },
  // 其他配置...
};

3. 运行npm run dev:watch，webpack会监听文件变化，每次修改都会重新编译并将产物写入public目录，之后你的Express服务就可以直接读取这个目录的文件。

方案3：结合Express与webpack-dev-middleware #

如果你需要同时保留Express的自定义服务逻辑和webpack的热更新能力，可以使用webpack-dev-middleware替代webpack-dev-server，同时配置写入磁盘：

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const devConfig = require('./webpack.config.development.js');

const app = express();
const compiler = webpack(devConfig);

// 挂载webpack-dev-middleware，开启磁盘写入
app.use(webpackDevMiddleware(compiler, {
  publicPath: devConfig.output.publicPath,
  writeToDisk: true, // 强制写入本地磁盘
}));

// 其他Express路由、中间件配置...

app.listen(3000, () => {
  console.log('Express server running on port 3000');
});

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