Webpack中copy-webpack-plugin执行时机过早问题求助

我之前也踩过这个坑！copy-webpack-plugin默认的执行时机（旧版本是beforeEmit，新版本默认是emit）往往会在HtmlWebpackPlugin、UglifyJSPlugin这类处理插件完成工作前就运行，导致复制的文件不是最终构建好的版本，甚至可能复制到不存在的文件。下面是我亲测有效的解决方法：

1. 先确认插件版本 #

首先检查你的copy-webpack-plugin版本，不同版本的配置方式不一样：

npm list copy-webpack-plugin

2. 调整插件执行顺序 #

webpack插件的执行顺序和plugins数组的顺序直接相关，把CopyWebpackPlugin放在数组的最后一位，确保它在HtmlWebpackInlineSourcePlugin、UglifyJSPlugin等处理类插件之后初始化：

// webpack.config.js
plugins: [
  new HtmlWebpackPlugin({
    inlineSource: '.(js|css)$', // 你的原有配置
    // ...其他HtmlWebpackPlugin选项
  }),
  new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin),
  new UglifyJSPlugin(),
  // 把CopyWebpackPlugin放在最后
  new CopyWebpackPlugin({
    patterns: [
      { from: 'src/assets', to: 'assets' }, // 你的复制规则
      // ...其他复制项
    ]
  })
]

3. 强制指定执行阶段（关键） #

如果调整顺序还没解决问题，就手动指定它在**afterEmit阶段**执行——这个阶段是webpack把所有构建好的文件写入磁盘之后，能保证你复制的是最终产物：

针对v6+版本的copy-webpack-plugin #

直接在插件配置里加stage选项：

new CopyWebpackPlugin({
  patterns: [
    { from: 'src/assets', to: 'assets' }
  ],
  stage: 'afterEmit' // 强制在文件写入磁盘后执行
})

针对v5及以下版本 #

旧版本没有stage选项，需要通过webpack的compiler钩子手动注册：

// webpack.config.js
plugins: [
  // ...其他插件（HtmlWebpackPlugin等）
  // 用自定义函数注册CopyWebpackPlugin到afterEmit钩子
  function() {
    this.hooks.afterEmit.tap('DelayedCopyPlugin', () => {
      const CopyWebpackPlugin = require('copy-webpack-plugin');
      new CopyWebpackPlugin({
        patterns: [
          { from: 'src/assets', to: 'assets' }
        ]
      }).apply(this);
    });
  }
]

4. 检查复制路径的正确性 #

如果你的复制规则里引用了webpack输出目录（比如dist）下的文件，一定要确保这些文件是由其他插件（比如HtmlWebpackPlugin）生成的，并且路径配置正确，避免复制还未生成的文件。

这样调整后，copy-webpack-plugin就会在所有构建和优化工作完成后再执行，复制的就是最终的产物了！

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