HTML

HTML 资源经常被用来当做入口文件提供给 Parcel，但也可以被 JavaScript 文件引用，如提供一个链接到其他页面。通过 URL 链接的脚本、样式、媒体资源和其他 HTML 文件都会被提取和编译。在 HTML 中的链接将被重写成正确的输出文件地址。所有的文件名路径都应该相对于当前的 HTML 文件。

  1. <html>
  2.   <body>
  3.     <!-- 引入一个文件 -->
  4.     <img src="./images/header.png" />
  6.     <a href="./other.html">Link to another page</a>
  8.     <!-- 导入一个JavaScript包 -->
  9.     <script src="./index.js"></script>
  10.   </body>
  11. </html>

导入未编译的资源

在 HTML 文件中添加的链接都将被 Parcel 编译（例如：JavaScript, TypeScript, SCSS 等）。Parcel 会自动处理这些资源并更新链接指向编译后的资源。

<html>
  <head>
    <!-- 包含一个 SCSS 文件 -->
    <link rel="stylesheet" href="./my-styles/style.scss" />
  </head>
</html>

PostHTML

PostHTML是一个通过各类插件转换 HTML 的工具。在 Parcel 中通过创建一个名字为.posthtmlrc (JSON), .posthtmlrc.js, 或 posthtml.config.js的配置文件来配置它。

安装插件：

yarn add posthtml-img-autosize

创建一个.posthtmlrc文件

{
  "plugins": {
    "posthtml-img-autosize": {
      "root": "./images"
    },
    "posthtml-modules": {
      "root": "./src"
    }
  }
}

在plugins对象中 key 指定插件，values 以对象形式被用来定义该插件的配置选项。如果这个插件没有配置，value 设置为true

配置了posthtml-modules后，导入的模块以/路径开始将变成相对路径./src

帮助我们改善文档

如果有遗漏或者不清楚的地方，请在本站的仓库 提交issue 或者 编辑此页面.