单入口Webpack拆分WordPress Gutenberg项目CSS文件问题

我明白你的困扰——单入口配置下想把两类SCSS分别打包成独立CSS文件，但当前配置只生成了一个。问题出在MiniCssExtractPlugin的配置逻辑和Webpack默认的chunk打包策略上，下面我给你拆解原因并提供可行的修改方案：

问题根源 #

当前配置里，你在loader中设置的filename并不会生效，因为MiniCssExtractPlugin的全局filename配置会覆盖它。而且Webpack在单入口下，所有被导入的CSS资源默认会被合并到同一个chunk对应的CSS文件里，不管你匹配的是哪种SCSS文件。

解决方案：通过SplitChunks拆分CSS Chunks #

我们可以利用Webpack的splitChunks优化配置，根据SCSS文件的名称规则，把editor.scss和styles.scss分别拆成独立的chunk，再配合MiniCssExtractPlugin生成对应的CSS文件。

修改你的Webpack生产配置，重点调整optimization和module.rules部分：

/**
 * This file defines the configuration that is used for the production build.
 */
const { join } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const externals = require('./externals');

/**
 * Theme production build configuration.
 */
module.exports = {
	mode: 'production',
	devtool: 'hidden-source-map',
	context: process.cwd(),
	
	// Clean up build output
	stats: {
		all: false,
		assets: true,
		colors: true,
		errors: true,
		performance: true,
		timings: true,
		warnings: true
	},

	// Permit importing @wordpress/* packages.
	externals,

	// Optimize output bundle.
	optimization: {
		minimize: true,
		noEmitOnErrors: true,
		splitChunks: {
			chunks: 'all',
			cacheGroups: {
				// 拆分前端styles.scss相关的CSS
				frontendStyles: {
					test: /styles\.s?css$/,
					name: 'styles',
					type: 'css/mini-extract',
					enforce: true,
				},
				// 拆分编辑器editor.scss相关的CSS
				editorStyles: {
					test: /editor\.s?css$/,
					name: 'editor',
					type: 'css/mini-extract',
					enforce: true,
				}
			}
		}
	},

	// Specify where the code comes from.
	entry: {
		editor: join(process.cwd(), 'src', 'index.js')
	},

	output: {
		pathinfo: false,
		path: join(process.cwd(), 'build'),
		filename: '[name].js'
	},

	module: {
		strictExportPresence: true,
		rules: [
			{
				// Process JS with Babel.
				test: /\.js$/,
				include: [join(process.cwd(), 'src')],
				loader: require.resolve('babel-loader')
			},
			{
				// 统一处理SCSS文件，不再区分loader里的filename
				test: /\.s?css$/,
				use: [
					MiniCssExtractPlugin.loader,
					'css-loader',
					'sass-loader'
				]
			}
		]
	},

	plugins: [
		new MiniCssExtractPlugin({
			filename: '[name].style.css',
			chunkFilename: '[id].css'
		})
	]
};

关键修改点说明 #

• 合并SCSS处理规则：移除了原来分拆的styles.scss和editor.scss单独loader配置，统一用一个规则处理所有SCSS文件，因为我们不再依赖loader指定输出文件名。
• 新增splitChunks缓存组：
  • frontendStyles：匹配所有styles.scss/sass文件，将其打包到名为styles的chunk中，最终生成styles.style.css。
  • editorStyles：匹配所有editor.scss/sass文件，打包到名为editor的chunk中，最终生成editor.style.css。
  • type: 'css/mini-extract'：明确告诉Webpack我们要拆分的是MiniCssExtractPlugin处理的CSS模块。
  • enforce: true：强制触发拆分逻辑，忽略Webpack的默认拆分优先级。

这样修改后，运行生产构建，你就能在build目录下得到三个目标文件：

• editor.js：编辑器的核心JS逻辑
• editor.style.css：编辑器专属样式
• styles.style.css：网站前端公共样式

完全满足你的需求！

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