通过webpack.config.js修改@wordpress/scripts的MiniCssExtractPlugin配置

当你直接在webpack.config.js中新增MiniCssExtractPlugin实例时，会和@wordpress/scripts默认配置里的原有插件冲突——这就导致两个插件同时工作，一个输出CSS到根目录，一个输出到css文件夹。正确的做法是定位并修改已存在的插件实例，而不是新增。

解决步骤 #

1. 遍历默认配置的插件数组，识别出MiniCssExtractPlugin的实例
2. 替换该实例的filename配置为css/[name].css
3. 按需添加其他自定义插件（比如RemoveEmptyScriptsPlugin）

完整的webpack.config.js配置 #

const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
const RemoveEmptyScriptsPlugin = require( 'webpack-remove-empty-scripts' );

module.exports = {
	...defaultConfig,
	plugins: defaultConfig.plugins.map( plugin => {
		// 找到默认的MiniCssExtractPlugin实例并修改输出路径
		if ( plugin instanceof MiniCssExtractPlugin ) {
			return new MiniCssExtractPlugin( {
				filename: 'css/[name].css',
				ignoreOrder: false,
			} );
		}
		// 保留其他默认插件的原有配置
		return plugin;
	} ).concat( [
		// 添加自定义的RemoveEmptyScriptsPlugin
		new RemoveEmptyScriptsPlugin(),
	] ),
};

代码说明 #

• 用map遍历默认插件数组，对每个插件做类型判断：如果是MiniCssExtractPlugin的实例，就返回一个配置了新输出路径的实例，其他插件保持原样
• 最后通过concat添加你需要的额外插件，避免打乱原有插件的执行顺序和功能

这样修改后，CSS文件只会输出到css子文件夹，不会再在根目录生成重复文件。

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