Webpack 4.0构建后无法复制文件问题求助

这个坑我之前也踩过！本质原因是copy-webpack-plugin默认的执行时机不对——它默认在webpack的emit阶段运行，这时候webpack还没把构建好的文件写入到dist目录里呢，自然复制不到最新的文件。

下面给你两种靠谱的解决办法，根据你用的copy-webpack-plugin版本来选：

方法一：用新版本copy-webpack-plugin（推荐，v5+） #

首先确保你装的是适配webpack 4/5的版本：

npm install copy-webpack-plugin --save-dev

然后在webpack配置里这样写：

const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
  // 你的其他配置：entry, output, module等
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin(),
    new UglifyJsPlugin(),
    new ExtractTextPlugin(...),
    // 重点是这个CopyWebpackPlugin的配置
    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, 'dist'), // 要复制的源目录：你的构建输出目录
          to: path.resolve(__dirname, '你的目标路径'), // 替换成你要复制到的目录
          force: true, // 强制覆盖目标目录里的旧文件
        },
      ],
      options: {
        hook: 'afterEmit', // 关键！让插件在afterEmit阶段运行，这时候文件已经全写到dist里了
      },
    }),
  ],
};

方法二：手动用webpack钩子+fs-extra（兼容旧版本） #

如果你的copy-webpack-plugin版本比较老，或者不想改插件版本，可以直接用webpack的afterEmit钩子来手动复制，这种方式更直观，也不容易出问题：

首先装个fs-extra（比原生fs好用，支持目录复制）：

npm install fs-extra --save-dev

然后在webpack配置里加这个钩子：

const fs = require('fs-extra');
const path = require('path');

module.exports = {
  // 你的其他配置...
  plugins: [
    // 你的现有插件：CleanWebpackPlugin, HtmlWebpackPlugin等
  ],
  // 添加afterEmit钩子
  afterEmit: (compiler) => {
    const sourceDir = path.resolve(__dirname, 'dist');
    const targetDir = path.resolve(__dirname, '你的目标路径');
    // 复制目录，覆盖旧文件
    fs.copySync(sourceDir, targetDir, { overwrite: true });
    console.log(`构建文件已成功复制到 ${targetDir}`);
  },
};

额外注意点 #

• 确保CleanWebpackPlugin在最前面执行，先清理dist目录，再生成新文件，最后复制
• 路径一定要用path.resolve生成绝对路径，避免相对路径带来的各种奇怪问题
• 如果你的构建有异步任务，afterEmit是最稳妥的时机，因为它是webpack构建流程的最后一步之一，所有文件都已经写入磁盘了

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