Try   HackMD

Webpack Include 其他 HTML 檔案

在製作專案時，一定會有全站頁面共用的元件（像是 header, footer 等等），若今天碰到 header、footer 有調整需求，要一個個修改 html 檔光用想的就覺得辛苦，本次討論的是若專案並非使用前端框架來製作時該如何處理

安裝 html-loader

$ npm install --save-dev html-loader

專案目錄結構

├── README.md
├── package-lock.json
├── package.json
├── src
|  ├── include
|  |  ├── footer.html
|  |  └── header.html
|  ├── index.html
|  └── main.js
└── webpack.config.js

準備共用元件

/src/include/header.html











<header>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Blog</a></li>
        </ul>
    </nav>
</header>

/src/include/footer.html




<footer>
    Copyright © 2021 XXX. All rights reserved.
</footer>

要加入共用元件的頁面

/src/index.html

















<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <%= require('html-loader!./include/header.html').default %>
    <main>
        網站內容
    </main>
    <%= require('html-loader!./include/footer.html').default %>
</body>
</html>

這邊會需要在 require() 後方加上 .default 否則在頁面上會顯示 [object Module]

結果

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

本文重點在如何使用 html-loader include 其他 html 檔，樣式的部分暫不另外做其他的設定

tags: webpack html-loader
Last changed by 
 
77
0
231

Read more

Safari 出現 SyntaxError: Invalid regular expression: invalid group specifier name 錯誤

&#x7DB2;&#x7AD9;&#x4E2D;&#x5982;&#x679C;&#x6709;&#x4F7F;&#x7528;&#x5230;&#x6B63;&#x898F;&#x8868;&#x9054;&#x5F0F;&#xFF0C;Safari &#x700F;&#x89BD;&#x5668;&#x6703;&#x5728;&#x67D0;&#x500B;&#x6B63;&#x898F;&#x898F;&#x5247;&#x4E0B;&#x5831;&#x51FA;&#x4EE5;&#x4E0B;&#x932F;&#x8AA4;&#xFF1A;SyntaxError: Invalid regular expression: invalid group specifier name&#xFF0C;&#x63A5;&#x8457;&#x7DB2;&#x7AD9;&#x53EF;&#x80FD;&#x5C31;&#x6703;&#x4E00;&#x7247;&#x7A7A;&#x767D;&#x6216;&#x662F;&#x7121;&#x6CD5;&#x6B63;&#x5E38;&#x904B;&#x4F5C;&#x3002; &#x4EE5;&#x4E0B;&#x662F;&#x6211;&#x63A5;&#x624B;&#x6848;&#x5B50;&#x5167;&#x7684;&#x5176;&#x4E2D;&#x4E00;&#x6BB5;&#x7A0B;&#x5F0F;&#x78BC;&#xFF1A; transPoint(point) { // &#x4E0B;&#x9762;&#x9019;&#x6BB5; Safari &#x6703;&#x5831;&#x932F;&#xFF0C;&#x5FC5;&#x9808;&#x7528; RegExp &#x5305; return point.replace(/\B(?&lt;!\.\d*)(?=(\d{3})+(?!\d))/g, &apos;,&apos;); }, &#x4E0A;&#x9762;&#x9019;&#x6BB5;&#x76F4;&#x63A5;&#x628A;&#x6B63;&#x898F;&#x898F;&#x5247;&#x5305;&#x5728; /.../g &#x88E1;&#x5728; Safari &#x4E0A;&#x662F;&#x6703;&#x51FA;&#x932F;&#x7684;&#xFF0C;&#x9700;&#x8981;&#x4F7F;&#x7528; new RegExp(&apos;...&apos;, &apos;g&apos;) &#x5305;&#x8D77;&#x4F86;&#x624D;&#x53EF;&#x4EE5;&#xFF0C;&#x4E26;&#x4E14;&#x6709;&#x4F7F;&#x7528;&#x5230; \d &#x7684;&#x90E8;&#x4EFD;&#x8981;&#x6539;&#x7528;&#x5169;&#x500B;&#x53CD;&#x659C;&#x7DDA;&#x4F86;&#x53D6;&#x4EE3;&#xFF0C;&#x4F8B;&#x5982; \d &#x9700;&#x66F4;&#x6539;&#x70BA; \\d

Oct 2, 2021
npm 與 npx 之間的關係

&#x524D;&#x8A00; &#x4E4B;&#x524D;&#x5728;&#x770B; react &#x7684;&#x5B98;&#x65B9;&#x6587;&#x4EF6;&#x6642;&#xFF0C;&#x6587;&#x4E2D;&#x5728;&#x5EFA;&#x7ACB;&#x4E00;&#x500B;&#x65B0;&#x7684; react &#x5C08;&#x6848;&#x6709;&#x4F7F;&#x7528;&#x5230;&#x4E00;&#x689D;&#x6307;&#x4EE4;&#xFF1A;npx create-react-app my-app&#xFF0C;&#x7576;&#x6642;&#x6C92;&#x7279;&#x5225;&#x60F3;&#x8AAA;&#x5B83;&#x662F;&#x505A;&#x4EC0;&#x9EBC;&#x7528;&#x7684;&#xFF0C;&#x5C31;&#x5148;&#x7167;&#x505A;&#x5427;&#xFF5E; &#x9019;&#x5E7E;&#x5929;&#x525B;&#x597D;&#x6709;&#x6A5F;&#x6703;&#x78B0;&#x5230;&#x4E86;&#xFF0C;&#x5728;&#x9019;&#x908A;&#x505A;&#x500B;&#x7B46;&#x8A18;&#x3002; &#x4ECB;&#x7D39; npx &#x662F; npm v5.2.0 &#x958B;&#x59CB;&#x52A0;&#x5165;&#x7684;&#x4E00;&#x500B;&#x6307;&#x4EE4;&#xFF0C;&#x4E5F;&#x662F;&#x4E00;&#x500B; CLI &#x5DE5;&#x5177; &#x4E00;&#x500B;&#x6C38;&#x4E45;&#x5B58;&#x5728;&#x672C;&#x6A5F;&#x3001;&#x4E00;&#x500B;&#x81E8;&#x6642;&#x5B89;&#x88DD;&#xFF0C;&#x57F7;&#x884C;&#x5B8C;&#x5F8C;&#x79FB;&#x9664; &#x9019;&#x908A;&#x5C31;&#x62FF; create-react-app &#x4F86;&#x8209;&#x4F8B; &#x4EE5; npm &#x7684;&#x65B9;&#x5F0F;&#x4F86;&#x5EFA;&#x7ACB;&#xFF1A;

Sep 29, 2021
一台電腦使用多個 Git 帳號 (SSH 金鑰)

&#x524D;&#x8A00; &#x65B0;&#x516C;&#x53F8;&#x5C08;&#x6848;&#x611F;&#x89BA;&#x6703;&#x6642;&#x5E38;&#x4F7F;&#x7528; git&#xFF0C;&#x4E3B;&#x8981;&#x662F;&#x60F3;&#x5728;&#x82E5;&#x6709;&#x7DCA;&#x6025;&#x60C5;&#x6CC1;&#x6642;&#xFF0C;&#x5E0C;&#x671B;&#x5728;&#x5BB6;&#x4E2D;&#x4E5F;&#x6709;&#x8FA6;&#x6CD5;&#x8655;&#x7406;&#x516C;&#x53F8;&#x7684;&#x4E8B;&#xFF0C;&#x525B;&#x597D;&#x76EE;&#x524D;&#x9084;&#x5728;&#x719F;&#x6089;&#x74B0;&#x5883;&#x624B;&#x908A;&#x66AB;&#x6642;&#x6C92;&#x6709;&#x6392;&#x5C08;&#x6848;&#xFF0C;&#x5C31;&#x5728;&#x516C;&#x53F8;&#x96FB;&#x8166;&#x8A66;&#x4E86;&#x4E00;&#x4E0B;&#x3002; &#x76EE;&#x6A19; &#x5728;&#x540C;&#x4E00;&#x53F0;&#x96FB;&#x8166;&#x4E0A;&#xFF0C;&#x516C;&#x53F8; github &#x5E33;&#x865F;&#x53EF;&#x4EE5;&#x7BA1;&#x7406;&#x516C;&#x53F8;&#x5C08;&#x6848;&#x3001;&#x79C1;&#x4EBA; github &#x5E33;&#x865F;&#x53EF;&#x4EE5;&#x7BA1;&#x7406;&#x79C1;&#x4EBA;&#x5C08;&#x6848; &#x7522;&#x751F;&#x4E0D;&#x540C;&#x7684;&#x91D1;&#x9470; &#x57F7;&#x884C;&#x4EE5;&#x4E0B;&#x547D;&#x4EE4;&#xFF0C;Email &#x8A18;&#x5F97;&#x66F4;&#x63DB; $ ssh-keygen -t rsa -C &quot;username@example.com&quot;

May 13, 2021
解決使用 CSS transition 造成圖片模糊／跳動的問題

&#x5728;&#x505A; campaign &#x6848;&#x6642;&#x5E38;&#x6703;&#x9047;&#x5230;&#x5716;&#x7247;&#xFF08;&#x4E0D;&#x8AD6;&#x662F; &lt;img&gt; &#x6216; css background&#xFF09;&#x4F7F;&#x7528; transition &#x505A;&#x52D5;&#x614B;&#x6642;&#x6703;&#x6A21;&#x7CCA;&#xFF0C;&#x6700;&#x5F8C;&#x5230;&#x5B9A;&#x9EDE;&#x5F8C;&#x6703;&#x8DF3;&#x52D5;&#x4E00;&#x4E0B;&#x7684;&#x554F;&#x984C;&#xFF0C;&#x56E0;&#x70BA;&#x4E00;&#x76F4;&#x5F88;&#x60F1;&#x4EBA;&#x6240;&#x4EE5;&#x5C31;&#x5FCD;&#x4E0D;&#x4F4F;&#x627E;&#x4E86;&#x89E3;&#x6CD5; selector { backface-visibility: hidden; transform: translateZ(0) scale(1, 1); } &#x52A0;&#x4E86;&#x4E0A;&#x9762;&#x7684;&#x8A2D;&#x5B9A; Chrome &#x770B;&#x8D77;&#x4F86;&#x554F;&#x984C;&#x5C31;&#x89E3;&#x6C7A;&#x4E86;&#xFF0C;&#x4F46;&#x4E0D;&#x66C9;&#x5F97;&#x70BA;&#x4F55; Safari&#xFF08;&#x65B0;&#x751F;&#x4EE3; IE&#xFF09;&#x611F;&#x89BA;&#x597D;&#x50CF;&#x6C92;&#x6709;&#x592A;&#x5927;&#x7684;&#x6539;&#x5584;&#xFF0C;&#x65BC;&#x662F;&#x6211;&#x53E6;&#x5916;&#x52A0;&#x4E86; will-change &#x5C6C;&#x6027;&#xFF0C;Safari &#x770B;&#x8D77;&#x4F86;&#x5C31;&#x597D;&#x591A;&#x4E86;&#xFF0C;&#x4EE5;&#x4E0B;&#x9644;&#x4E0A;&#x6211;&#x7684;&#x8A2D;&#x5B9A;&#xFF1A; selector {

May 13, 2021
Read more from 77
Published on HackMD