如何配置webpack devServer，实现修改时自动执行prerelease等价操作

你当前基于webpack v5.89.0的项目中，package.json包含以下脚本：

"scripts": {
  ...,
  "start": "webpack serve --mode development -c webpack.config.js",
  "prerelease": "rm -rf dist/*; npm run build; zip -r dist.zip dist",
  ...
}

且devServer已配置writeToDisk: true。要在运行npm run start时，每次代码修改自动执行prerelease的等价操作，可以通过修改webpack配置文件实现，以下是具体方案：

方案：利用webpack编译钩子执行操作 #

webpack的compiler.hooks.done钩子会在每次编译完成后触发，我们可以借助这个钩子调用shell命令，模拟prerelease的完整流程。

修改你的webpack.config.js：

const { execSync } = require('child_process');

module.exports = {
  // 原有配置...
  devServer: {
    devMiddleware: {
      writeToDisk: true,
    },
  },
  plugins: [
    {
      apply: (compiler) => {
        // 绑定编译完成钩子
        compiler.hooks.done.tap('AutoPrereleaseTasks', () => {
          try {
            console.log('[AutoPrerelease] 开始执行打包流程...');
            // 1. 清理dist目录
            execSync('rm -rf dist/*', { stdio: 'inherit' });
            // 2. 执行生产构建（替换为你的build命令逻辑）
            execSync('npm run build', { stdio: 'inherit' });
            // 3. 打包dist为zip文件
            execSync('zip -r dist.zip dist', { stdio: 'inherit' });
            console.log('[AutoPrerelease] 流程执行完成！');
          } catch (error) {
            console.error('[AutoPrerelease] 流程执行失败:', error.message);
          }
        });
      },
    },
  ],
};

注意事项 #

• 若你的build脚本是生产模式构建，频繁执行会拖慢开发效率。你可以直接在钩子中调用webpack生产构建命令，替代npm run build，比如：

  execSync('webpack --mode production -c webpack.config.js', { stdio: 'inherit' })
  

• 跨平台兼容性：如果项目需要在Windows环境运行，需替换rm -rf和zip命令为Windows兼容版本，或者使用跨平台工具（如rimraf清理目录、zip-a-folder打包）。
• 同步/异步选择：上述代码用execSync同步执行命令，会阻塞webpack后续流程；若希望异步执行，可改用exec并处理回调，但需确保操作顺序正确。

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