如何在Webpack中生成额外的静态文件

嘿，刚好我之前也遇到过一模一样的需求——不想用那些功能太复杂的版本管理插件，就想简单从内存字符串生成个version.json。给你两个超简便的方案，都是用Webpack生态里的主流工具甚至内置能力：

方案一：Webpack内置钩子（零额外插件） #

这是最轻量化的方式，完全不用装任何第三方插件，直接用Webpack本身的编译钩子来注入内存中的文件：

const { RawSource } = require('webpack');

module.exports = {
  // 你的其他Webpack配置（entry、output等）
  plugins: [
    // 自定义一个简单的插件函数
    function() {
      // 监听Webpack的emit钩子（文件输出前的阶段）
      this.hooks.emit.tap('GenerateVersionFile', (compilation) => {
        // 这里定义你的版本内容，可以是硬编码字符串，也可以动态获取
        const versionContent = JSON.stringify({
          version: process.env.npm_package_version, // 直接读取package.json的版本
          buildTime: new Date().toISOString(), // 生成构建时间
          env: process.env.NODE_ENV // 环境变量
        }, null, 2); // 格式化JSON，方便阅读
        
        // 把内存中的字符串作为静态文件添加到输出目录
        compilation.emitAsset('version.json', new RawSource(versionContent));
      });
    }
  ]
};

这个方法的核心是利用Webpack的compilation.emitAsset API，直接把内存中的字符串转换成输出文件，完全符合你“内存中简单字符串生成”的需求，没有多余功能。

方案二：用CopyWebpackPlugin直接生成（如果你偏好这个插件） #

你之前提到的CopyWebpackPlugin其实支持直接生成内容，不用依赖物理源文件——只是这个特性可能没那么显眼。只要你用的是v6及以上版本的CopyWebpackPlugin，就能这么配置：

const CopyPlugin = require('copy-webpack-plugin');
// 如果需要从package.json读取版本，也可以提前引入
const pkg = require('./package.json');

module.exports = {
  // 你的其他Webpack配置
  plugins: [
    new CopyPlugin({
      patterns: [
        {
          // 指定输出的文件名
          to: 'version.json',
          // 直接传入内存中的字符串内容，支持动态生成
          content: JSON.stringify({
            version: pkg.version,
            buildDate: new Date().toLocaleString(),
            // 还可以加其他自定义字段
            buildMode: process.env.NODE_ENV === 'production' ? 'prod' : 'dev'
          }, null, 2)
        }
      ]
    })
  ]
};

这个方案的好处是用你已经熟悉的插件，不用学习新的Webpack API，同样不需要任何物理源文件，完全从内存生成。

额外小提示 #

如果是用Vue CLI、Create React App这类封装好的脚手架，只需要把上述配置对应加到脚手架的自定义Webpack配置里就行（比如Vue CLI的vue.config.js里的configureWebpack字段，CRA需要用react-app-rewired或者craco来修改配置），核心逻辑完全一致。

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