如何在不使用import/require时将转译后的JS文件复制到dist目录？

碰到这种webpack没处理未引入文件的情况太常见了，这里给你几个靠谱的方案，你可以根据自己的项目情况选：

方案一：继续用copy-webpack-plugin + Babel核心包转译 #

你之前的思路是对的，只是缺了正确的Babel调用方式。需要用到@babel/core和你项目里已经配置的preset（比如@babel/preset-env），步骤如下：

1. 确保已经安装依赖（如果没装的话）：

npm install @babel/core @babel/preset-env --save-dev

2. 在copy-webpack-plugin的transform里调用Babel的transform方法：

const babel = require('@babel/core');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  // 其他webpack配置...
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: 'test.js',
          to: 'test.js', // 输出到/dist根目录，不用写绝对路径，webpack会基于output.path自动拼接
          transform: async (content, absoluteFrom) => {
            // 把读取到的Buffer转成字符串
            const code = content.toString();
            // 调用Babel完成转译
            const result = await babel.transformAsync(code, {
              presets: ['@babel/preset-env'],
              filename: absoluteFrom, // 让Babel能自动读取你项目里的.babelrc或babel.config.js配置
            });
            return result.code;
          },
        },
      ],
    }),
  ],
};

注意：如果你的项目已经有babel.config.js或者.babelrc配置文件，transformAsync会自动读取这些规则，不用在参数里重复写presets，上面的示例是为了更清晰才显式声明的。

方案二：把test.js加入webpack的entry配置（更符合webpack常规流程） #

这其实是更推荐的方式——让webpack把test.js当成一个独立的入口来处理，这样它会自动用你配置好的babel-loader转译，然后输出到dist目录：

const path = require('path');

module.exports = {
  entry: {
    main: './src/index.js', // 你原来的主入口文件
    test: './test.js', // 把test.js加进来作为另一个入口
  },
  output: {
    filename: '[name].js', // 输出文件名对应entry的key，这里会生成test.js
    path: path.resolve(__dirname, 'dist'),
  },
  // 你的loader配置（已经配置过babel-loader的话不用修改）
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
    ],
  },
};

这种方式的好处是：不用额外写transform逻辑，webpack会统一处理所有入口文件的转译、压缩、代码分割等流程，和你的其他JS文件保持一致的处理规则。

方案三：用Babel CLI单独转译，配合npm脚本 #

如果test.js是完全独立的文件，不需要和webpack的其他流程绑定，你也可以在npm脚本里先转译它，再执行webpack打包：

1. 安装babel-cli：

npm install @babel/cli --save-dev

2. 在package.json里添加脚本：

{
  "scripts": {
    "build": "babel test.js --out-file dist/test.js && webpack --mode production"
  }
}

这样每次执行npm run build时，会先把test.js转译到dist目录，再运行webpack打包其他代码。

怎么选方案？ #

• 想让webpack统一管理所有JS文件的处理流程，选方案二；
• 不想修改entry配置，或者test.js是特殊的独立文件，选方案一；
• test.js不需要和webpack其他流程关联，只是单独转译输出，选方案三。

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