成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

BaronZhang / 3201人閱讀

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

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

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

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

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

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

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

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

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

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

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

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

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

Iframe流

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

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

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

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

SPA流

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

后端模板渲染

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

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

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

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

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

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

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

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

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

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



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

    
大家仔細(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模板生成出來的頁面",
    filename: "index.html",
    template: "index.ejs",
  })],
};

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



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

    
大家仔細(xì)瞧好了

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



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

    
大家仔細(xì)瞧好了

    
這是用smarty生成的內(nèi)容：{$articleContent}
處理資源的動(dòng)態(tà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模板生成出來的頁面",
    filename: "index.html",
    template: "index.ejs",
  })],
  module: {
    loaders: {
      // 圖片加載器，雷同file-loader，更適合圖片，可以將較小的圖片轉(zhuǎn)成base64，減少http請求
      // 如下配置，將小于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頁面

    
大家仔細(xì)瞧好了

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

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

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

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

大家仔細(xì)瞧好了

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

還未結(jié)束

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

示例代碼

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/80638.html

相關(guān)文章

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

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

    yedf 評論0 收藏0

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

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

    dinfer 評論0 收藏0

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

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

    dingda 評論0 收藏0

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

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

    Lowky 評論0 收藏0

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

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

    oliverhuang 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<