Parcel前端打包资源引用指南

Parcel是一款流行的轻量级前端打包工具，以快速构建著称。

1、 Parcel能够导入CSS等非JavaScript资源，方便项目资源整合与使用。

2、 导入此类文件时，Parcel 不会像其他构建工具那样将其内容内联，而是将所有依赖项单独打包。在使用 CSS Modules 时，生成的类名会被导出并存放在对应的 JavaScript 捆绑包中，便于动态引用与管理。

3、 创建main.css文件后，在JS中通过import语句即可引入该CSS资源。

4、 页面样式由parcel编译生成，并未在index.html中通过link引入main.css文件。

5、 JavaScript 文件或 HTML 文件均可导入 CSS 资源，支持使用 @import 语法引入依赖项，也可通过 url() 函数加载图片、字体等资源。所有通过 @import 引入的 CSS 文件将被合并至同一个 CSS 包中，同时 url() 中的路径会被重写为对应的输出文件名。无论是资源引用还是路径处理，所有文件路径均需相对于当前 CSS 文件所在位置进行解析和关联，确保构建后资源正确加载，路径关系准确无误。

6、 支持LESS、SASS和Stylus等CSS预处理语言，使用方式与普通CSS一致，无需额外配置。同时，借助Parcel可轻松引入并使用各类npm模块，提升开发效率与项目灵活性。

7、 HTML 资源通常作为 Parcel 的入口文件，也可被 JavaScript 文件引用，例如用于跳转到其他页面的链接。系统会自动提取并处理 HTML 文件中的脚本、样式、媒体及其他资源的 URL，并进行编译。在构建过程中，所有引用路径会被重新写入，确保指向正确的输出文件。此外，所有引用的文件路径都应基于当前 HTML 文件的相对位置进行设置，以保证资源正确加载和项目结构的完整性。