Webpack技术问题：单入口如何输出两个打包文件？

嘿，我完全懂你的需求——单个入口同时输出一个固定文件名的打包文件和一个带哈希的版本，这个场景在需要兼顾缓存策略和固定入口引用的时候特别常见。你之前尝试用数组给output.filename赋值确实行不通，因为Webpack的这个配置项只接受字符串或者返回字符串的函数，没法直接传数组。下面给你几个可行的解决方案：

方法一：使用自定义Webpack插件（推荐） #

这种方法最高效，只需要一次打包就能生成两个文件。我们可以写一个简单的自定义插件，在Webpack编译完成后，把带哈希的文件内容复制一份，作为固定文件名的资源添加到输出列表里。

首先，在你的Webpack配置文件里添加这个插件：

const path = require('path');

// 自定义插件：复制带哈希的文件为固定文件名
class DuplicateOutputPlugin {
  apply(compiler) {
    // 在编译完成、准备输出文件时触发
    compiler.hooks.afterEmit.tap('DuplicateOutputPlugin', (compilation) => {
      // 找到输出的带哈希的JS文件（匹配file.xxx.js格式）
      const hashedFilename = Object.keys(compilation.assets).find(name => 
        name.startsWith('file.') && name.endsWith('.js')
      );

      if (hashedFilename) {
        // 获取原文件的内容
        const fileContent = compilation.assets[hashedFilename].source();
        // 添加固定文件名的资源到输出队列
        compilation.assets['file.js'] = {
          source: () => fileContent,
          size: () => fileContent.length
        };
      }
    });
  }
}

module.exports = {
  entry: './file.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'file.[chunkhash].js' // 先输出带哈希的版本
  },
  plugins: [new DuplicateOutputPlugin()]
};

这样配置后，Webpack会先生成带哈希的file.xxxx.js，然后通过插件自动添加file.js到输出目录里，一次打包完成两个文件的生成。

方法二：使用CopyWebpackPlugin复制文件 #

如果你不想写自定义插件，可以用现成的copy-webpack-plugin，先打包出带哈希的文件，再复制一份并重命名为固定文件名。

1. 先安装插件：

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

2. 修改Webpack配置：

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

module.exports = {
  entry: './file.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'file.[chunkhash].js'
  },
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          // 匹配dist目录下的file.xxx.js文件
          from: 'file.*.js',
          // 复制并重命名为file.js
          to: 'file.js',
          context: path.resolve(__dirname, './dist'),
          force: true // 强制覆盖已存在的file.js
        }
      ]
    })
  ]
};

注意：这种方法依赖Webpack先输出带哈希的文件，再由复制插件完成重命名，所以要确保插件的执行顺序正确。

方法三：执行两次Webpack打包（简单但低效） #

如果你的项目比较简单，也可以直接在npm脚本里执行两次打包命令，分别生成两个文件：

修改package.json的scripts：

{
  "scripts": {
    "build": "webpack --mode production && webpack --mode production --output-filename file.js"
  }
}

第一次打包生成带哈希的文件，第二次打包生成固定文件名的file.js。不过这种方法会重复编译代码，效率较低，适合小型项目。

注意事项 #

• 哈希类型：推荐使用chunkhash或者contenthash，不要用hash——因为hash是基于整个编译过程的，只要项目里有任何文件变化，所有哈希都会改变，达不到缓存单个文件的效果。
• 缓存问题：固定文件名的file.js可能会被客户端缓存，如果需要更新，你可能需要配合其他缓存策略（比如设置HTTP缓存头）或者在需要更新的时候手动触发客户端缓存刷新。

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