《nodejs+gulp+webpack基礎實戰篇》課程筆記（八）--模板化開發演練：分離公用標頭檔

標籤：

　　還是先來安裝本課需要的外掛程式：

npm install raw-loader --save-dev//樣本：var header = require("xxx.html");就會把html的內容讀取出來

　　這是一個webpack載入器，可以把檔案原樣返回為字串。

　　這裡補充下使用載入器的兩種方法：

　　1、在我們的webpack設定檔中寫上

｛test:/\.html$/,loader:"載入器名稱"｝//這代表所有html尾碼均會使用這個載入器來處理

　　2、在require的時候調用載入器

　　require（“載入器名!xxx.html”）;

　　這裡，我們也也將使用三種載入公用頭部檔案的方法：

　　第一種：在login.js中直接require（XXX）;然後利用jquery的方式插入。

//var getHeader = require("raw!./../../tpl/header.include");//$("#header").append(getHeader);

　　第二種：直接在頁面中寫上 <%=require("raw!xxx.html")%>.

 <%=require("raw!./header.include")%>.

　　第三種：利用NODEJS代碼<%=htmlWebPackPlugin.options.xxx%>

　　　　　　new HtmlWebpackPlugin({

　　　　　　　　這裡隨便設定一個變數名：這裡用fs模組把檔案讀取出來。

　　　　　　})

 include:{           header:require(‘fs‘).readFileSync("./src/tpl/head.include")          }

<%=htmlWebpackPlugin.options.include.header%>

 

《nodejs+gulp+webpack基礎實戰篇》課程筆記（八）--模板化開發演練：分離公用標頭檔