如何配置WordPress与Webpack，将CSS和JS分离到不同构建文件夹

在WordPress子主题中使用@wordpress/scripts的Webpack工具时，默认编译后的文件会生成在build文件夹内。希望修改输出路径，将编译后的JS和CSS文件分别放到build/css和build/js子文件夹中，请问该如何实现？

当前使用的webpack.config.js配置文件如下：

/**
 * External Dependencies
 */
const path = require( 'path' );
const FixStyleOnlyEntriesPlugin = require( 'webpack-fix-style-only-entries' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );

/**
 * WordPress Dependencies
 */
const defaultConfig = require( '@wordpress/scripts/config/webpack.config.js' );

module.exports = {
    ...defaultConfig,
    ...{
        entry: {
            main: path.resolve( process.cwd(), 'src/scss', 'main.scss' ),
            app: path.resolve( process.cwd(), 'src/js', 'app.js' ),
        },
    },
    plugins: [ new FixStyleOnlyEntriesPlugin(), new MiniCssExtractPlugin() ],
};

你需要调整Webpack的output配置指定JS输出路径，同时配置MiniCssExtractPlugin指定CSS输出路径，并且注意保留@wordpress/scripts的默认插件，避免丢失核心功能。修改后的完整配置如下：

/**
 * External Dependencies
 */
const path = require( 'path' );
const FixStyleOnlyEntriesPlugin = require( 'webpack-fix-style-only-entries' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );

/**
 * WordPress Dependencies
 */
const defaultConfig = require( '@wordpress/scripts/config/webpack.config.js' );

module.exports = {
    ...defaultConfig,
    entry: {
        main: path.resolve( process.cwd(), 'src/scss', 'main.scss' ),
        app: path.resolve( process.cwd(), 'src/js', 'app.js' ),
    },
    // 配置JS文件输出路径
    output: {
        ...defaultConfig.output,
        filename: 'js/[name].js',
    },
    plugins: [
        ...defaultConfig.plugins, // 保留默认插件
        new FixStyleOnlyEntriesPlugin(),
        // 配置CSS文件输出路径
        new MiniCssExtractPlugin( {
            filename: 'css/[name].css',
        } ),
    ],
};

关键修改说明 #

• JS输出路径：通过output.filename设置为js/[name].js，其中[name]会替换为你entry中定义的键名（比如app），最终JS文件会输出到build/js目录。
• CSS输出路径：给MiniCssExtractPlugin传入filename参数css/[name].css，对应entry中的main，最终CSS文件会输出到build/css目录。
• 保留默认插件：使用...defaultConfig.plugins合并默认插件，确保@wordpress/scripts自带的代码压缩、环境变量注入等功能正常工作。

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