How to make my Webpack plugin compatible with rspack

[axetroy]

I am migrating to rspack for my project.

The project uses a custom webpack plugin

const path = require('node:path')
const webpack = require('webpack')
const getLastCommit = require('./get_latest_commit')
const getSubModuleStatus = require('./get_submodule_status')

/**
 * 一个版本插件，将 Git 的版本信息，写入到 DefinePlugin 中
 * 并且生成一个 version 文件到输出目录中
 * @type {import('webpack').WebpackPluginInstance}
 */
class VersionWebpackPlugin {
    /**
     *
     * @param {Object} [options]
     * @param {boolean} [options.projectDir] 项目目录
     * @param {boolean} [options.emitFile] 是否生成文件
     */
    constructor(options = {}) {
        this.options = Object.assign(Object.create(null), options)
    }

    /**
     * 是否已注入环境变量
     */
    #hasInjected = false

    /**
     * 缓存的 Git 信息
     * @type {Record<string, string> | null}
     */
    #cachedGitInfo = null

    /**
     *
     * @param {import('webpack').Compiler} compiler
     */
    apply(compiler) {
        const projectDir = this.options.projectDir || path.resolve(compiler.context)

        // 写入到环境变量
        compiler.hooks.beforeCompile.tapPromise('VersionDefinePlugin', async () => {
            if (this.#hasInjected) return

            const keyValueMap = await this.getGitInformation(projectDir)

            this.modifyDefinePlugin(compiler, keyValueMap)

            this.#hasInjected = true
        })

        if (this.options.emitFile) {
            // 输出 version 文件到构建目录
            compiler.hooks.emit.tapPromise('VersionDefinePlugin', async (compilation) => {
                const keyValueMap = await this.getGitInformation(projectDir)

                const content = Object.entries(keyValueMap)
                    .map(([key, value]) => {
                        return `${key} ${value}`
                    })
                    .join('\n')

                compilation.emitAsset('version', new webpack.sources.RawSource(content))
            })
        }
    }

    /**
     * @param {string} cwd
     * @returns {Promise<Record<string, string>>}
     */
    async getGitInformation(cwd) {
        if (this.#cachedGitInfo) {
            return this.#cachedGitInfo
        }

        const info = await getLastCommit(cwd)

        const subModules = await getSubModuleStatus(cwd)

        const env = Object.assign(Object.create(null), {
            'process.env.VUE_APP_COMMIT_HASH': info.hash,
            'process.env.VUE_APP_COMMIT_TIME': info.authoredOn * 1000,
            'process.env.VUE_APP_COMMIT_BRANCH': Buffer.from(info.branch).toString('base64'),
            'process.env.VUE_APP_BUILD_TIME': Date.now()
        })

        for (const m of subModules) {
            const name = m.path.replace(/\//, '_').toUpperCase()
            env[`process.env.VUE_APP_SUBMODULE_${name}`] = m.hash
        }

        this.#cachedGitInfo = env

        return env
    }

    /**
     * 修改 DefinePlugin 的值
     * @param {import('webpack').Compiler} compiler
     * @param {Record<string, string>} keyValueMap
     */
    modifyDefinePlugin(compiler, keyValueMap) {
        const definitions = {}

        for (const key in keyValueMap) {
            if (Object.hasOwn(keyValueMap, key)) {
                const value = keyValueMap[key]
                definitions[key] = JSON.stringify(value)
            }
        }

        const definePlugin = new webpack.DefinePlugin(definitions)

        definePlugin.apply(compiler)
    }
}

module.exports = VersionWebpackPlugin

I know this plugin uses webpack's APIs, which makes it impossible to run in rspack.

How can I make it compatible with rspack, or is there a compatibility guide to help plugin authors?

[axetroy]

Resolved with following guide:

Richienb/node-polyfill-webpack-plugin#48