除了 JavaScript 文件外,Parcel 也支援 HTML 文件的處理。

像是下面這邊筆者創建了個簡單的範例,建立了個 index.html,裡面載入了 profile.jpg 且連結了 hello.html 頁面。

<html>
    <body>
      <img src="./images/profile.jpg">
      <a href="./hello.html">Say Hello</a>
    </body>
</html>

Parcel - HTML asset

profile.jpg 是很單純的大頭照。

Parcel - HTML asset

hello.html 內引用了 hello.js 並輸出 Hello World 字樣。

<html>
    <body>
      <script src="./scripts/hello.js"></script>
      Hello World
    </body>
</html>

Parcel - HTML asset

hello.js 內則是很簡單的利用 Console 輸出 hello world 字樣。

console.log("hello world");

Parcel - HTML asset

調用 Parcel 命令建置並啟用服務。

Parcel - HTML asset

Parcel 解析網站後會將需要的檔案處理後移至輸出目錄。

Parcel - HTML asset

連至啟動的服務網址,可看到網站正確的被運行。

Parcel - HTML asset

Parcel - HTML asset