如何通过Webpack为WordPress拆分JS文件注入版本号？

方案一：文件名嵌入内容哈希（推荐） #

直接通过Webpack配置让主文件和拆分chunk的文件名自带内容哈希，替代?ver=参数。内容变更时哈希自动更新，天然适配WordPress缓存机制，无需额外PHP逻辑。

修改Webpack配置：

module.exports = {
    // ... 其他配置
    output: {
        filename: "js/[name].bundled.[contenthash].js",
        chunkFilename: "js/[name].bundled.[contenthash].js", // 为拆分chunk指定命名规则
        path: path.resolve(__dirname, "assets/"),
    },
    plugins: [
        new MiniCssExtractPlugin({ 
            filename: "css/[name].[contenthash].css" 
        })
    ]
};

打包后资源会变成theme.bundled.abc123.js、Lightbox.bundled.def456.js的形式，WordPress引入时直接使用带哈希的文件名即可。

方案二：利用Manifest插件集中管理版本号 #

如果坚持要保留?ver=参数形式，可通过webpack-manifest-plugin生成资源映射表，在PHP中读取并为资源添加版本号。

步骤1：安装并配置插件 #

npm install webpack-manifest-plugin --save-dev

修改Webpack配置：

const { WebpackManifestPlugin } = require('webpack-manifest-plugin');

module.exports = {
    // ... 其他配置
    output: {
        filename: "js/[name].bundled.js",
        chunkFilename: "js/[name].bundled.js",
        path: path.resolve(__dirname, "assets/"),
        publicPath: '/wp-content/themes/your-theme/assets/' // 替换为你的主题资源路径
    },
    plugins: [
        // ... 其他插件
        new WebpackManifestPlugin({
            fileName: 'asset-manifest.json',
            generate: (seed, files) => {
                const manifest = {};
                // 可替换为Git短哈希或自定义版本号
                const version = Date.now().toString(); 
                files.forEach(file => {
                    manifest[file.name] = `${file.path}?ver=${version}`;
                });
                return manifest;
            }
        })
    ]
};

步骤2：在WordPress中读取Manifest #

在主题functions.php中添加工具函数：

function get_asset_url($asset_name) {
    $manifest_path = get_template_directory() . '/assets/asset-manifest.json';
    if (!file_exists($manifest_path)) {
        return get_template_directory_uri() . '/assets/' . $asset_name;
    }
    $manifest = json_decode(file_get_contents($manifest_path), true);
    return isset($manifest[$asset_name]) ? $manifest[$asset_name] : get_template_directory_uri() . '/assets/' . $asset_name;
}

// 引入主文件
wp_enqueue_script('theme-script', get_asset_url('js/theme.bundled.js'), array(), false, true);

Webpack动态加载chunk时会自动使用manifest中带版本号的路径。

方案三：动态设置公共路径 #

通过Webpack的publicPath参数，为所有动态加载的资源统一添加版本参数，实现简单但冗余度较高。

修改Webpack配置：

module.exports = {
    // ... 其他配置
    output: {
        filename: "js/[name].bundled.js",
        chunkFilename: "js/[name].bundled.js",
        path: path.resolve(__dirname, "assets/"),
        publicPath: '/wp-content/themes/your-theme/assets/?ver=' + Date.now().toString() + '&'
    }
};

总结 #

• 优先选择方案一：符合前端缓存最佳实践，无需额外代码维护，Webpack自动处理版本更新。
• 若需保留?ver=参数形式，选择方案二：通过manifest集中管理资源版本，可控性更强。

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