• HTML
    • 导入未编译的资源
    • PostHTML
    • 帮助我们改善文档

    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 或者 编辑此页面.