webpack 打包后复制文件

写在前面

项目中使用一些特定依赖的时候，会定义全局暴露的变量，不希望 webpack 将其压缩混淆，期望在打包后的成果物中保留原样。

copy-webpack-plugin

首先想到使用 webpack 插件 copy-webpack-plugin，可以直接复制原始资源到输出目录中（非最优解！）
安装依赖

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

并在 config.js 中使用

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

plugins: [
  new CopyWebpackPlugin({
    patterns: [
      {
        from: 'src/util.js',
        to: 'public',  // dist 的下级目录
      },
    ],
  }),
],

使用后发现js代码还是被混淆了，问题在于 webpack.config.js 中使用了 optimization.minimizer 进行了全面压缩，在复制过程中也进行了同步操作。
既然打包过程中使用插件复制不可行，可在打包结束后再进行复制。

fs-extra

fs-extra是 fs 模块的拓展模块，简化了复制等操作。

• 安装依赖：

npm install fs-extra --save-dev

• 在webpack中使用钩子函数，进行复制操作：

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

module.exports = {
  plugins: [
	{
        apply: (compiler) => {
          compiler.hooks.afterEmit.tap('AfterEmitPlugin', async (compilation) => {
            // 开发环境跳过处理
            if( process.env.NODE_ENV === 'development' ) return;
            const sourcePaths = [
              path.resolve(__dirname, 'public', 'jsPlugin')
            ];
            const targetPath = path.resolve(__dirname, 'dist', 'public', 'jsPlugin');
            for (const sourcePath of sourcePaths) {
              try {
                await fs.copy(sourcePath, targetPath);
              } catch (err) {
                console.error(`Error copying ${sourcePath}:`, err);
              }
            }
          })
        });
    }
  ]
}

由于仅需要在打包的时候执行以上操作，故在函数中增加开发环境判断。