成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

webpack多頁(yè)應(yīng)用架構(gòu)系列（十二）：利用webpack生成HTML普通網(wǎng)頁(yè)&頁(yè)面模板

BaronZhang / 3174人閱讀

摘要：徹底分離源文件目錄和生成文件目錄使用生成出來(lái)的頁(yè)面可以很安心地跟打包好的其它資源放到一起，相對(duì)于另起一個(gè)目錄專(zhuān)門(mén)存放頁(yè)面文件來(lái)說(shuō)，整個(gè)文件目錄結(jié)構(gòu)更加合理如何利用生成頁(yè)面生成頁(yè)面主要是通過(guò)來(lái)實(shí)現(xiàn)的，下面來(lái)介紹如何實(shí)現(xiàn)。

本文首發(fā)于Array_Huang的技術(shù)博客——實(shí)用至上，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載。
原文地址：https://segmentfault.com/a/1190000007126268
如果您對(duì)本系列文章感興趣，歡迎關(guān)注訂閱這里：https://segmentfault.com/blog/array_huang
為什么要用webpack來(lái)生成HTML頁(yè)面

按照我們前面的十一篇的內(nèi)容來(lái)看，自己寫(xiě)一個(gè)HTML頁(yè)面，然后在上面加載webpack打包的js或其它類(lèi)型的資源，感覺(jué)不也用得好好的么？

是的沒(méi)錯(cuò)，不用webpack用requireJs其實(shí)也可以啊，甚至于，傳統(tǒng)那種人工管理模塊依賴(lài)的做法也沒(méi)有什么問(wèn)題嘛。

但既然你都已經(jīng)看到這一篇了，想必早已和我一樣，追求著以下這幾點(diǎn)吧：

更懶，能自動(dòng)化的事情絕不做第二遍。

更放心，調(diào)通的代碼比人靠譜，更不容易出錯(cuò)。

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

那么，廢話(huà)不多說(shuō)，下面就來(lái)說(shuō)說(shuō)使用webpack生成HTML頁(yè)面有哪些好處吧。

對(duì)多個(gè)頁(yè)面共有的部分實(shí)現(xiàn)復(fù)用

在實(shí)際項(xiàng)目的開(kāi)發(fā)過(guò)程中，我們會(huì)發(fā)現(xiàn)，雖然一個(gè)項(xiàng)目里會(huì)有很多個(gè)頁(yè)面，但這些頁(yè)面總有那么幾個(gè)部分是相同或相似的，尤其是頁(yè)頭頁(yè)尾，基本上是完全一致的。那我們要怎么處理這些共有的部分呢？

復(fù)制粘貼流 
不就是復(fù)制粘貼的事嘛？寫(xiě)好一份完整的HTML頁(yè)面，做下個(gè)頁(yè)面的時(shí)候，直接copy一份文件，然后直接在copy的文件上進(jìn)行修改不就好了嗎？

誰(shuí)是這么想這么做的，放學(xué)留下來(lái)，我保證不打死你！我曾經(jīng)接受過(guò)這么一套系統(tǒng)，頂部欄菜單想加點(diǎn)東西，就要每個(gè)頁(yè)面都改一遍，可維護(hù)性爛到爆啊。

Iframe流

Iframe流常見(jiàn)于管理后臺(tái)類(lèi)項(xiàng)目，可維護(hù)性O(shè)K，就是缺陷比較多，比如說(shuō)：

點(diǎn)擊某個(gè)菜單，頁(yè)面是加載出來(lái)了但是瀏覽器地址欄上的URL沒(méi)變，刷新的話(huà)又回到首頁(yè)了。

搜索引擎收錄完蛋，前臺(tái)項(xiàng)目一般不能用Iframe來(lái)布局。

沒(méi)有逼格，Low爆了，這是最重要的一點(diǎn)（大誤）。

SPA流

最近這幾年，隨著移動(dòng)互聯(lián)網(wǎng)的興起，SPA也變得非常常見(jiàn)了。不過(guò)SPA的局限性也非常大，比如搜索引擎無(wú)法收錄，但我個(gè)人最在意的，是它太復(fù)雜了，尤其是一些本來(lái)業(yè)務(wù)邏輯就多的系統(tǒng)，很容易懵圈。

后端模板渲染

這倒真是一個(gè)辦法，只是，需要后端的配合，利用后端代碼把頁(yè)面的各個(gè)部分給拼合在一起，所以這方法對(duì)前端起家的程序員還是有點(diǎn)門(mén)檻的。

利用前端模板引擎生成HTML頁(yè)面

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

處理資源的動(dòng)態(tài)路徑

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

自動(dòng)加載webpack生成的css、less

如果你使用webpack來(lái)生成HTML頁(yè)面，那么，你可以配置好每個(gè)頁(yè)面加載的chunk（webpack打包后生成的js文件），生成出來(lái)的頁(yè)面會(huì)自動(dòng)用

由于沒(méi)有指定模板文件，因此生成出來(lái)的HTML文件僅有最基本的HTML結(jié)構(gòu)，并不帶實(shí)質(zhì)內(nèi)容。可以看出，這更適合React這種把HTML藏js里的方案。

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

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



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

    
大家仔細(xì)瞧好了

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

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

那么，最后生成出來(lái)的HTML文件會(huì)是這樣的：



  
    
    
     
    按照ejs模板生成出來(lái)的頁(yè)面
  
  
    
這是一個(gè)用html-webpack-plugin生成的HTML頁(yè)面

    
大家仔細(xì)瞧好了

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



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

    
大家仔細(xì)瞧好了

    
這是用smarty生成的內(nèi)容：{$articleContent}
處理資源的動(dòng)態(tài)路徑

接下來(lái)在上面例子的基礎(chǔ)上，我們演示如何處理資源的動(dòng)態(tài)路徑：

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


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

    
大家仔細(xì)瞧好了

我們改動(dòng)了什么呢？

參數(shù)output.filename里，我們添了個(gè)變量[chunkhash]，這個(gè)變量的值會(huì)隨chunk內(nèi)容的變化而變化，那么，這個(gè)chunk文件最終的路徑就會(huì)是一個(gè)動(dòng)態(tài)路徑了。

我們?cè)陧?yè)面上添加了一個(gè) 按照ejs模板生成出來(lái)的頁(yè)面

這是一個(gè)用html-webpack-plugin生成的HTML頁(yè)面

大家仔細(xì)瞧好了

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

還未結(jié)束

至此，我們實(shí)現(xiàn)了使用webpack生成HTML頁(yè)面并嘗到了它所帶來(lái)的甜頭，但我們尚未實(shí)現(xiàn)“對(duì)多個(gè)頁(yè)面共有的部分實(shí)現(xiàn)復(fù)用”，下一篇《webpack多頁(yè)應(yīng)用架構(gòu)系列（十三）：構(gòu)建一個(gè)簡(jiǎn)單的模板布局系統(tǒng)》我們就來(lái)介紹這部分的內(nèi)容。

示例代碼

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

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

webpack多頁(yè)應(yīng)用架構(gòu)系列（一）：一步一步解決架構(gòu)痛點(diǎn)：https://segmentfault.com/a/1190000006843916

webpack多頁(yè)應(yīng)用架構(gòu)系列（二）：webpack配置常用部分有哪些？:https://segmentfault.com/a/1190000006863968

webpack多頁(yè)應(yīng)用架構(gòu)系列（三）：怎么打包公共代碼才能避免重復(fù)？：https://segmentfault.com/a/1190000006871991

webpack多頁(yè)應(yīng)用架構(gòu)系列（四）：老式j(luò)Query插件還不能丟，怎么兼容？:https://segmentfault.com/a/1190000006887523

webpack多頁(yè)應(yīng)用架構(gòu)系列（五）：聽(tīng)說(shuō)webpack連less/css也能打包？:https://segmentfault.com/a/1190000006897458

webpack多頁(yè)應(yīng)用架構(gòu)系列（六）：聽(tīng)說(shuō)webpack連圖片和字體也能打包？:https://segmentfault.com/a/1190000006907701

webpack多頁(yè)應(yīng)用架構(gòu)系列（七）：開(kāi)發(fā)環(huán)境、生產(chǎn)環(huán)境傻傻分不清楚？:https://segmentfault.com/a/1190000006952432

webpack多頁(yè)應(yīng)用架構(gòu)系列（八）：教練我要寫(xiě)ES6！webpack怎么整合Babel？:https://segmentfault.com/a/1190000006992218

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

webpack多頁(yè)應(yīng)用架構(gòu)系列（十）：如何打造一個(gè)自定義的bootstrap:https://segmentfault.com/a/1190000007043716

webpack多頁(yè)應(yīng)用架構(gòu)系列（十一）：預(yù)打包Dll，實(shí)現(xiàn)webpack音速編譯:https://segmentfault.com/a/1190000007104372

webpack多頁(yè)應(yīng)用架構(gòu)系列（十二）：利用webpack生成HTML普通網(wǎng)頁(yè)&頁(yè)面模板:https://segmentfault.com/a/1190000007126268

webpack多頁(yè)應(yīng)用架構(gòu)系列（十三）：構(gòu)建一個(gè)簡(jiǎn)單的模板布局系統(tǒng):https://segmentfault.com/a/1190000007159115

webpack多頁(yè)應(yīng)用架構(gòu)系列（十四）：No復(fù)制粘貼！多項(xiàng)目共用基礎(chǔ)設(shè)施

webpack多頁(yè)應(yīng)用架構(gòu)系列（十五）：論前端如何在后端渲染開(kāi)發(fā)模式下夾縫生存

webpack多頁(yè)應(yīng)用架構(gòu)系列（十六）：善用瀏覽器緩存，該去則去，該留則留

本文首發(fā)于Array_Huang的技術(shù)博客——實(shí)用至上，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載。
原文地址：https://segmentfault.com/a/1190000007126268
如果您對(duì)本系列文章感興趣，歡迎關(guān)注訂閱這里：https://segmentfault.com/blog/array_huang

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/80638.html

相關(guān)文章

  • webpack多頁(yè)應(yīng)用架構(gòu)系列（十三）：構(gòu)建一個(gè)簡(jiǎn)單的模板布局系統(tǒng)

    摘要：原文地址如果您對(duì)本系列文章感興趣，歡迎關(guān)注訂閱這里前言上文多頁(yè)應(yīng)用架構(gòu)系列十二利用生成普通網(wǎng)頁(yè)頁(yè)面模板我們基本上已經(jīng)搞清楚如何利用來(lái)生成普通網(wǎng)頁(yè)頁(yè)面模板，本文將以我的腳手架項(xiàng)目介紹如何在這基礎(chǔ)上搭建一套簡(jiǎn)單的模板布局系統(tǒng)。 本文首發(fā)于Array_Huang的技術(shù)博客——實(shí)用至上，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載。原文地址：https://segmentfault.com/a/1190000007...

    yedf 評(píng)論0 收藏0

  • webpack多頁(yè)應(yīng)用架構(gòu)系列（十五）：論前端如何在后端渲染開(kāi)發(fā)模式下夾縫生存

    摘要：回到純靜態(tài)頁(yè)面開(kāi)發(fā)階段，讓頁(yè)面不需要后端渲染也能跑起來(lái)。改造開(kāi)始本文著重介紹如何將靜態(tài)頁(yè)面改造成后端渲染需要的模板?？偨Y(jié)在后端渲染的項(xiàng)目里使用多頁(yè)應(yīng)用架構(gòu)是絕對(duì)可行的，可不要給老頑固們嚇唬得又回到傳統(tǒng)前端架構(gòu)了。 本文首發(fā)于Array_Huang的技術(shù)博客——實(shí)用至上，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載。原文地址：https://segmentfault.com/a/119000000820338...

    dinfer 評(píng)論0 收藏0

  • webpack多頁(yè)應(yīng)用架構(gòu)系列（十五）：論前端如何在后端渲染開(kāi)發(fā)模式下夾縫生存

    摘要：回到純靜態(tài)頁(yè)面開(kāi)發(fā)階段，讓頁(yè)面不需要后端渲染也能跑起來(lái)。改造開(kāi)始本文著重介紹如何將靜態(tài)頁(yè)面改造成后端渲染需要的模板?？偨Y(jié)在后端渲染的項(xiàng)目里使用多頁(yè)應(yīng)用架構(gòu)是絕對(duì)可行的，可不要給老頑固們嚇唬得又回到傳統(tǒng)前端架構(gòu)了。 本文首發(fā)于Array_Huang的技術(shù)博客——實(shí)用至上，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載。原文地址：https://segmentfault.com/a/119000000820338...

    dingda 評(píng)論0 收藏0

  • webpack多頁(yè)應(yīng)用架構(gòu)系列（一）：一步一步解決架構(gòu)痛點(diǎn)

    摘要：本文首發(fā)于的技術(shù)博客實(shí)用至上，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載。原文地址如果您對(duì)本系列文章感興趣，歡迎關(guān)注訂閱這里這系列文章講什么本系列文章主要介紹如何用這一當(dāng)前流行的構(gòu)建工具來(lái)設(shè)計(jì)一個(gè)多頁(yè)應(yīng)用的架構(gòu)。 本文首發(fā)于Array_Huang的技術(shù)博客——實(shí)用至上，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載。原文地址：https://segmentfault.com/a/1190000006843916如果您對(duì)本系列文章...

    Lowky 評(píng)論0 收藏0

  • webpack多頁(yè)應(yīng)用架構(gòu)系列（三）：怎么打包公共代碼才能避免重復(fù)？

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

    oliverhuang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<