Parcel 与 HTML

HTML

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

<html>
  <body>
    <!-- 引入一个文件 -->
    <img src="./images/header.png" />

    <a href="./other.html">Link to another page</a>

    <!-- 导入一个JavaScript包 -->
    <script src="./index.js"></script>
  </body>
</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


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号

意见反馈
返回顶部