Parcel 2打包输出多个CSS文件，如何配置实现单文件合并输出

Parcel 2默认开启资源分割，会将HTML中独立引入的样式文件分别打包。要合并为单个CSS文件，可通过以下两种方式实现：

不要在HTML中引入多个独立CSS文件，创建一个统一的CSS入口文件，将所有样式通过@import引入：

1. 新建index.css文件，内容如下：

@import './a.css';
@import './b.css';

2. 修改test.html的样式引用，仅保留这一个入口文件：

<html>
  <head>
     <link rel="stylesheet" href="./index.css">
 </head>
</html>

3. 重新执行parcel build test.html，dist目录只会生成一个合并后的CSS文件。

如果不想调整现有代码的引用方式，可以通过配置修改Parcel的默认打包规则，强制合并所有静态CSS资源：

1. 在项目根目录的package.json中添加如下配置：

{
  "@parcel/bundler-default": {
    "minBundles": 1,
    "minBundleSize": 0
  }
}

2. 重新执行parcel build test.html即可。

注意：如果你的项目中存在CSS动态导入逻辑，该配置不会强制合并动态加载的样式资源，仅会合并所有静态引用的CSS文件。

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