如何通过Webpack的babel-loader转译含PHP注入的JavaScript文件？

需要转译注入了PHP代码的JavaScript文件（服务器会通过PHP模块预处理该文件，在返回响应前结合后端上下文处理JS），示例代码如下：

function component() {
  const element = document.createElement('div');

  <?php if(isset($_GET["id"])): ?>
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  <?php else: ?>
  element.innerHTML = _.join(['Hello', 'PHP injected', ' webpack'], ' ');
  <?php endif; ?>
  element.classList.add('hello');
  return element;
}

document.body.appendChild(component());

使用Webpack的babel-loader直接转译时，PHP标记会引发语法错误。自定义了babel-php-injected-loader尝试解决，但Webpack打包解析器仍不兼容，如何实现这类文件的转译？

1. 修正自定义Loader的核心问题 #

原Loader的占位符易在Babel转译（如代码压缩、变量重命名）时被破坏，且未适配Webpack的Loader上下文特性，调整后的Loader代码如下：

const babel = require('@babel/core');
const crypto = require('crypto');

module.exports = function (source) {
    const callback = this.async();
    // 基于PHP代码内容生成哈希占位符，确保唯一性且不易被篡改
    const phpBlocks = [];
    const phpRegex = /<\?php[\s\S]*?\?>/g;

    const processedSource = source.replace(phpRegex, (match) => {
        const hash = crypto.createHash('md5').update(match).digest('hex');
        const placeholder = `__PHP_BLOCK_${hash}__`;
        phpBlocks.push({ placeholder, code: match });
        return placeholder;
    });

    // 传入Webpack Loader上下文，让Babel适配打包环境
    const babelOptions = {
        presets: ['@babel/preset-env'],
        filename: this.resourcePath,
        sourceMaps: this.sourceMap,
    };

    babel.transform(processedSource, babelOptions, (err, result) => {
        if (err) return callback(err);

        let finalSource = result.code;
        // 全局匹配替换占位符，确保所有实例都被还原
        phpBlocks.forEach(({ placeholder, code }) => {
            finalSource = finalSource.replace(new RegExp(placeholder, 'g'), code);
        });

        // 传递Source Map（若启用）
        callback(null, finalSource, result.map);
    });
};

2. 配置Webpack规则 #

在webpack.config.js中，将自定义Loader放在babel-loader之前（Webpack Loader按从右到左顺序执行）：

const path = require('path');

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [
                    'babel-loader',
                    path.resolve(__dirname, './loaders/babel-php-injected-loader.js'),
                ],
            },
        ],
    },
};

3. 代码压缩兼容处理 #

若使用Terser等压缩插件，需配置忽略PHP占位符，避免被误修改或删除：

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
    optimization: {
        minimizer: [
            new TerserPlugin({
                terserOptions: {
                    compress: {
                        // 禁止压缩自定义PHP占位符
                        keep_infinity: true,
                        drop_console: true,
                    },
                    format: {
                        comments: false,
                    },
                },
            }),
        ],
    },
};

4. 语法约束 #

确保PHP代码块的位置不会破坏JavaScript语法结构：

• 合法示例：const foo = <?php echo $bar; ?>;
• 非法示例：const <?php echo 'foo'; ?> = 123;（转译后会导致语法错误）

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