WordPress插件构建JSX：Webpack无法监听assets并打包至dist的问题

问题概述 #

开发WordPress插件时，需要将assets/js目录下所有含JSX（依赖React、WordPress JS包）的文件，按原目录结构打包到dist/js，当前webpack配置仅能打包单个文件，无法批量处理和监听文件变化。

现有插件结构 #

my-plugin
    |_assets
        |_js
            |_admin（内含JS文件）
            |_helper（内含JS文件）
            ...
    |_dist
        |_js（需保持与assets/js相同的目录结构）

当前webpack配置（webpack.config.js） #

const path = require('path');

module.exports = {
    mode: 'production',
    entry: './assets/js/admin/js1.js',
    output: {
        filename: 'js1.js',
        path: path.resolve(__dirname, 'dist/js/admin')
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ['babel-loader'],
            },
        ],
    },
    resolve: {
        extensions: ['.js'],
    },
}

当前Babel配置（.babelrc） #

{
  "presets": [
    "@wordpress/babel-preset-default"
  ]
}

解决方案 #

1. 配置多入口自动扫描+目录结构保留 #

修改webpack配置，自动遍历assets/js下所有JS/JSX文件，同时保持输出目录与源目录一致：

const path = require('path');
const fs = require('fs');

// 自动扫描assets/js下的所有JS/JSX文件生成入口
const getEntries = () => {
    const entries = {};
    const scanDir = (dir, relativePath = '') => {
        const files = fs.readdirSync(dir);
        files.forEach(file => {
            const fullPath = path.join(dir, file);
            const stats = fs.statSync(fullPath);
            if (stats.isDirectory()) {
                scanDir(fullPath, path.join(relativePath, file));
            } else if (/\.(js|jsx)$/.test(file)) {
                const entryName = path.join(relativePath, file.replace(/\.(js|jsx)$/, ''));
                entries[entryName] = fullPath;
            }
        });
    };
    scanDir(path.resolve(__dirname, 'assets/js'));
    return entries;
};

module.exports = {
    mode: process.env.NODE_ENV === 'development' ? 'development' : 'production',
    entry: getEntries(),
    output: {
        filename: '[name].js', // [name]保留源文件的相对路径结构
        path: path.resolve(__dirname, 'dist/js'),
        clean: true // 打包前自动清理dist目录
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ['babel-loader'],
            },
        ],
    },
    resolve: {
        extensions: ['.js', '.jsx'], // 支持自动解析JSX扩展名
        alias: {
            '@wordpress': path.resolve(__dirname, 'node_modules/@wordpress') // 优化WordPress包导入路径
        }
    },
    devtool: process.env.NODE_ENV === 'development' ? 'source-map' : false, // 开发模式生成source map
    watch: process.env.NODE_ENV === 'development', // 开发模式自动监听文件变化
    watchOptions: {
        ignored: /node_modules/,
        poll: 1000 // 每秒检查一次文件更新
    }
};

2. 添加package.json脚本命令 #

在package.json中添加开发和生产打包的快捷命令：

{
  "scripts": {
    "build": "NODE_ENV=production webpack",
    "dev": "NODE_ENV=development webpack"
  }
}

3. 确认依赖安装 #

确保已安装必要的开发依赖：

npm install --save-dev webpack webpack-cli babel-loader @wordpress/babel-preset-default

关键说明 #

• 自动入口：getEntries函数会自动遍历assets/js下所有JS/JSX文件，新增文件无需手动修改配置。
• 目录同步：输出配置中的[name]会保留源文件的相对路径，确保dist/js结构与assets/js完全一致。
• 监听模式：执行npm run dev后，webpack会实时监听文件变化，自动重新打包。
• WordPress兼容：@wordpress/babel-preset-default已内置React编译支持，无需额外配置React相关预设。

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