国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

webpack多頁應用架構系列（十二）：利用webpack生成HTML普通網頁&頁面模板

BaronZhang / 3149人閱讀

摘要：徹底分離源文件目錄和生成文件目錄使用生成出來的頁面可以很安心地跟打包好的其它資源放到一起，相對于另起一個目錄專門存放頁面文件來說，整個文件目錄結構更加合理如何利用生成頁面生成頁面主要是通過來實現的，下面來介紹如何實現。

本文首發于Array_Huang的技術博客——實用至上，非經作者同意，請勿轉載。
原文地址：https://segmentfault.com/a/1190000007126268
如果您對本系列文章感興趣，歡迎關注訂閱這里：https://segmentfault.com/blog/array_huang
為什么要用webpack來生成HTML頁面

按照我們前面的十一篇的內容來看，自己寫一個HTML頁面，然后在上面加載webpack打包的js或其它類型的資源，感覺不也用得好好的么？

是的沒錯，不用webpack用requireJs其實也可以啊，甚至于，傳統那種人工管理模塊依賴的做法也沒有什么問題嘛。

但既然你都已經看到這一篇了，想必早已和我一樣，追求著以下這幾點吧：

更懶，能自動化的事情絕不做第二遍。

更放心，調通的代碼比人靠譜，更不容易出錯。

代碼潔癖，什么東西該放哪，一點都不能含糊，混在一起我就要死了。

那么，廢話不多說，下面就來說說使用webpack生成HTML頁面有哪些好處吧。

對多個頁面共有的部分實現復用

在實際項目的開發過程中，我們會發現，雖然一個項目里會有很多個頁面，但這些頁面總有那么幾個部分是相同或相似的，尤其是頁頭頁尾，基本上是完全一致的。那我們要怎么處理這些共有的部分呢？

復制粘貼流 
不就是復制粘貼的事嘛？寫好一份完整的HTML頁面，做下個頁面的時候，直接copy一份文件，然后直接在copy的文件上進行修改不就好了嗎？

誰是這么想這么做的，放學留下來，我保證不打死你！我曾經接受過這么一套系統，頂部欄菜單想加點東西，就要每個頁面都改一遍，可維護性爛到爆啊。

Iframe流

Iframe流常見于管理后臺類項目，可維護性OK，就是缺陷比較多，比如說：

點擊某個菜單，頁面是加載出來了但是瀏覽器地址欄上的URL沒變，刷新的話又回到首頁了。

搜索引擎收錄完蛋，前臺項目一般不能用Iframe來布局。

沒有逼格，Low爆了，這是最重要的一點（大誤）。

SPA流

最近這幾年，隨著移動互聯網的興起，SPA也變得非常常見了。不過SPA的局限性也非常大，比如搜索引擎無法收錄，但我個人最在意的，是它太復雜了，尤其是一些本來業務邏輯就多的系統，很容易懵圈。

后端模板渲染

這倒真是一個辦法，只是，需要后端的配合，利用后端代碼把頁面的各個部分給拼合在一起，所以這方法對前端起家的程序員還是有點門檻的。

利用前端模板引擎生成HTML頁面

所謂“用webpack生成HTML頁面”，其實也并不是webpack起的核心作用，實際上靠的還是前端的模板引擎將頁面的各個部分給拼合在一起來達到公共區域的復用。webpack更多的是組織統籌整個生成HTML頁面的過程，并提供更大的控制力。最終，webpack生成的到底是完整的頁面，還是供后端渲染的模板，就全看你自己把控了，非常靈活，外人甚至察覺不出來這到底是你自己寫的還是代碼統一生成的。

處理資源的動態路徑

如果你想用在文件名上加hash的方法作為緩存方案的話，那么用webpack生成HTML頁面就成為你唯一的選擇了，因為隨著文件的變動，它的hash也會變化，那么整個文件名都會改變，你總不能在每次編譯后都手動修改加載路徑吧？還是放心交給webpack吧。

自動加載webpack生成的css、less

如果你使用webpack來生成HTML頁面，那么，你可以配置好每個頁面加載的chunk（webpack打包后生成的js文件），生成出來的頁面會自動用

由于沒有指定模板文件，因此生成出來的HTML文件僅有最基本的HTML結構，并不帶實質內容。可以看出，這更適合React這種把HTML藏js里的方案。

利用模板引擎獲取更大的控制力

接下來，我們演示如何通過制定模板文件來生成HTML的內容，由于html-webpack-plugin原生支持ejs模板，因此這里也以ejs作為演示對象：



  
    
    
     
    <%= htmlWebpackPlugin.options.title %>
  
  
    
這是一個用html-webpack-plugin生成的HTML頁面

    
大家仔細瞧好了

"html-webpack-plugin"的配置里也要指定template參數：

var HtmlWebpackPlugin = require("html-webpack-plugin");
var webpackConfig = {
  entry: "index.js",
  output: {
    path: "dist",
    filename: "index_bundle.js"
  },
  plugins: [new HtmlWebpackPlugin({
    title: "按照ejs模板生成出來的頁面",
    filename: "index.html",
    template: "index.ejs",
  })],
};

那么，最后生成出來的HTML文件會是這樣的：



  
    
    
     
    按照ejs模板生成出來的頁面
  
  
    
這是一個用html-webpack-plugin生成的HTML頁面

    
大家仔細瞧好了

到這里，我們已經可以控制整個HTML文件的內容了，那么生成后端渲染所需的模板也就不是什么難事了，以PHP的模板引擎smarty為例：



  
    
    
     
    <%= htmlWebpackPlugin.options.title %>
  
  
    
這是一個用html-webpack-plugin生成的HTML頁面

    
大家仔細瞧好了

    
這是用smarty生成的內容：{$articleContent}
處理資源的動態路徑

接下來在上面例子的基礎上，我們演示如何處理資源的動態路徑：

var HtmlWebpackPlugin = require("html-webpack-plugin");
var webpackConfig = {
  entry: "index.js",
  output: {
    path: "dist",
    filename: "index_bundle.[chunkhash].js"
  },
  plugins: [new HtmlWebpackPlugin({
    title: "按照ejs模板生成出來的頁面",
    filename: "index.html",
    template: "index.ejs",
  })],
  module: {
    loaders: {
      // 圖片加載器，雷同file-loader，更適合圖片，可以將較小的圖片轉成base64，減少http請求
      // 如下配置，將小于8192byte的圖片轉成base64碼
      test: /.(png|jpg|gif)$/,
      loader: "url?limit=8192&name=./static/img/[hash].[ext]",
    },
  },
};


  
    
    
     
    <%= htmlWebpackPlugin.options.title %>
  
  
    
這是一個用html-webpack-plugin生成的HTML頁面

    
大家仔細瞧好了

我們改動了什么呢？

參數output.filename里，我們添了個變量[chunkhash]，這個變量的值會隨chunk內容的變化而變化，那么，這個chunk文件最終的路徑就會是一個動態路徑了。

我們在頁面上添加了一個 按照ejs模板生成出來的頁面

這是一個用html-webpack-plugin生成的HTML頁面

大家仔細瞧好了

顯然，html-webpack-plugin成功地將chunk加載了，又處理好了轉化為DataUrl格式的圖片，這一切，都是我們手工難以完成的事情。

還未結束

至此，我們實現了使用webpack生成HTML頁面并嘗到了它所帶來的甜頭，但我們尚未實現“對多個頁面共有的部分實現復用”，下一篇《webpack多頁應用架構系列（十三）：構建一個簡單的模板布局系統》我們就來介紹這部分的內容。

示例代碼

諸位看本系列文章，搭配我在Github上的腳手架項目食用更佳哦（笑）：Array-Huang/webpack-seed（https://github.com/Array-Huang/webpack-seed）。

附系列文章目錄（同步更新）

webpack多頁應用架構系列（一）：一步一步解決架構痛點：https://segmentfault.com/a/1190000006843916

webpack多頁應用架構系列（二）：webpack配置常用部分有哪些？:https://segmentfault.com/a/1190000006863968

webpack多頁應用架構系列（三）：怎么打包公共代碼才能避免重復？：https://segmentfault.com/a/1190000006871991

webpack多頁應用架構系列（四）：老式jQuery插件還不能丟，怎么兼容？:https://segmentfault.com/a/1190000006887523

webpack多頁應用架構系列（五）：聽說webpack連less/css也能打包？:https://segmentfault.com/a/1190000006897458

webpack多頁應用架構系列（六）：聽說webpack連圖片和字體也能打包？:https://segmentfault.com/a/1190000006907701

webpack多頁應用架構系列（七）：開發環境、生產環境傻傻分不清楚？:https://segmentfault.com/a/1190000006952432

webpack多頁應用架構系列（八）：教練我要寫ES6！webpack怎么整合Babel？:https://segmentfault.com/a/1190000006992218

webpack多頁應用架構系列（九）：總有刁民想害朕！ESLint為你阻擊垃圾代碼:https://segmentfault.com/a/1190000007030775

webpack多頁應用架構系列（十）：如何打造一個自定義的bootstrap:https://segmentfault.com/a/1190000007043716

webpack多頁應用架構系列（十一）：預打包Dll，實現webpack音速編譯:https://segmentfault.com/a/1190000007104372

webpack多頁應用架構系列（十二）：利用webpack生成HTML普通網頁&頁面模板:https://segmentfault.com/a/1190000007126268

webpack多頁應用架構系列（十三）：構建一個簡單的模板布局系統:https://segmentfault.com/a/1190000007159115

webpack多頁應用架構系列（十四）：No復制粘貼！多項目共用基礎設施

webpack多頁應用架構系列（十五）：論前端如何在后端渲染開發模式下夾縫生存

webpack多頁應用架構系列（十六）：善用瀏覽器緩存，該去則去，該留則留

本文首發于Array_Huang的技術博客——實用至上，非經作者同意，請勿轉載。
原文地址：https://segmentfault.com/a/1190000007126268
如果您對本系列文章感興趣，歡迎關注訂閱這里：https://segmentfault.com/blog/array_huang

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80638.html

相關文章

  • webpack多頁應用架構系列（十三）：構建一個簡單的模板布局系統

    摘要：原文地址如果您對本系列文章感興趣，歡迎關注訂閱這里前言上文多頁應用架構系列十二利用生成普通網頁頁面模板我們基本上已經搞清楚如何利用來生成普通網頁頁面模板，本文將以我的腳手架項目介紹如何在這基礎上搭建一套簡單的模板布局系統。 本文首發于Array_Huang的技術博客——實用至上，非經作者同意，請勿轉載。原文地址：https://segmentfault.com/a/1190000007...

    yedf 評論0 收藏0

  • webpack多頁應用架構系列（十五）：論前端如何在后端渲染開發模式下夾縫生存

    摘要：回到純靜態頁面開發階段，讓頁面不需要后端渲染也能跑起來。改造開始本文著重介紹如何將靜態頁面改造成后端渲染需要的模板。總結在后端渲染的項目里使用多頁應用架構是絕對可行的，可不要給老頑固們嚇唬得又回到傳統前端架構了。 本文首發于Array_Huang的技術博客——實用至上，非經作者同意，請勿轉載。原文地址：https://segmentfault.com/a/119000000820338...

    dingda 評論0 收藏0

  • webpack多頁應用架構系列（十五）：論前端如何在后端渲染開發模式下夾縫生存

    摘要：回到純靜態頁面開發階段，讓頁面不需要后端渲染也能跑起來。改造開始本文著重介紹如何將靜態頁面改造成后端渲染需要的模板。總結在后端渲染的項目里使用多頁應用架構是絕對可行的，可不要給老頑固們嚇唬得又回到傳統前端架構了。 本文首發于Array_Huang的技術博客——實用至上，非經作者同意，請勿轉載。原文地址：https://segmentfault.com/a/119000000820338...

    dinfer 評論0 收藏0

  • webpack多頁應用架構系列（一）：一步一步解決架構痛點

    摘要：本文首發于的技術博客實用至上，非經作者同意，請勿轉載。原文地址如果您對本系列文章感興趣，歡迎關注訂閱這里這系列文章講什么本系列文章主要介紹如何用這一當前流行的構建工具來設計一個多頁應用的架構。 本文首發于Array_Huang的技術博客——實用至上，非經作者同意，請勿轉載。原文地址：https://segmentfault.com/a/1190000006843916如果您對本系列文章...

    Lowky 評論0 收藏0

  • webpack多頁應用架構系列（三）：怎么打包公共代碼才能避免重復？

    摘要：在上一篇文章多頁應用架構系列二配置常用部分有哪些中，我介紹了如何配置多頁應用的入口，然而，如果僅僅如此操作，帶來的后果就是，打包生成出來的每一個入口文件都會完整包含所有代碼。的初始化常用參數有哪些，給這個包含公共代碼的命個名唯一標識。 本文首發于Array_Huang的技術博客——實用至上，非經作者同意，請勿轉載。原文地址：https://segmentfault.com/a/1190...

    oliverhuang 評論0 收藏0

發表評論

0條評論

BaronZhang

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<