2. 程式人生 > >自動化生成專案中的html頁面(中)

自動化生成專案中的html頁面(中)

阿新 • • 發佈：2019-01-02

1.如果我們需要在html-webpack-plugin外掛中傳引數，在模板中根目錄下的index.html模板中引用怎麼辦？我們可以在webpack.config.js檔案中寫入這麼一行程式碼：title:'webpack is good'
webpack.config.js程式碼如下：

var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

    entry:{                             //打包入口檔案
        main:'./src/script/main.js'
 
,
        a:'./src/script/a.js'
    },       
    output:{    
        path:__dirname + '/dist',    //打包後的檔案路徑
        filename:'js/[name]-[chunkhash].js'            //打包後的檔名
    },
    plugins:[
        new htmlWebpackPlugin({
            //注意傳的引數是一個物件
            filename:'index-[hash].html',
            template:'index.html'
 
,   //傳一個模板，就是根目錄下的index.html
            inject:'head',
            title:'webpack is good'             //這個是傳遞的引數
        })
    ]
}

然後我們通過模板獲取到引數，那我們應該怎麼做呢？
修改根目錄下index.html程式碼如下：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv
 
="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ -->

    <!-- 接收引數 -->
    <title><%=htmlWebpackPlugin.options.title %></title>


  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

沒錯，接收引數就用這行程式碼來實現：<%=htmlWebpackPlugin.options.title %>

2.然後在終端輸入npm run webpack

3.檢視生成的dist/js下的index-25659dd78be926614658.html檔案，看到<title>webpack is good</title>說明打包 成功！

該案例設計截圖效果如下：
這裡寫圖片描述

4.那是不是任意的引數都能被模板接收呢？我們在webpack.config.js檔案裡面加入這行程式碼：data:new Date()

webpack.config.js程式碼如下：

var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

    entry:{                             //打包入口檔案
        main:'./src/script/main.js',
        a:'./src/script/a.js'
    },       
    output:{    
        path:__dirname + '/dist',    //打包後的檔案路徑
        filename:'js/[name]-[chunkhash].js'            //打包後的檔名
    },
    plugins:[
        new htmlWebpackPlugin({
            //注意傳的引數是一個物件
            filename:'index-[hash].html',
            template:'index.html',   //傳一個模板，就是根目錄下的index.html
            inject:'head',
            title:'webpack is good',             //這個是傳遞的引數
            date:new Date()
        })
    ]
}

接下來在根目錄模板index.html中引入屬性
根目錄index.html程式碼如下：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ -->

    <!-- 接收引數 -->
    <title><%=htmlWebpackPlugin.options.title %></title>


  </head>
  <body>
    <%= htmlWebpackPlugin.options.date %>
  </body>
</html>

5.然後在終端輸入npm run webpack

6.檢視截圖效果如下：
這裡寫圖片描述
說明打包成功！

7.那這裡有一個疑問，到底我們究竟能在這個htmlWebpackPlugin取到哪些資訊呢？我們可以遍歷，
在根目錄模板index.html下面增加如下程式碼

<% for (var key in htmlWebpackPlugin){ %>
      <%= key  %>
    <% } %>

根目錄模板index.html程式碼如下：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ -->

    <!-- 接收引數 -->
    <title><%=htmlWebpackPlugin.options.title %></title>


  </head>
  <body>
    <!-- 注意這裡的等號代表輸出 -->
    <%= htmlWebpackPlugin.options.date %>

    <!-- 遍歷htmlWebpackPlugin -->
    <% for (var key in htmlWebpackPlugin){ %>
      <%= key  %>
    <% } %>
  </body>
</html>

webpack.config.js程式碼如下：

var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

    entry:{                             //打包入口檔案
        main:'./src/script/main.js',
        a:'./src/script/a.js'
    },       
    output:{    
        path:__dirname + '/dist',    //打包後的檔案路徑
        filename:'js/[name]-[chunkhash].js'            //打包後的檔名
    },
    plugins:[
        new htmlWebpackPlugin({
            //注意傳的引數是一個物件
            filename:'index.html',
            template:'index.html',   //傳一個模板，就是根目錄下的index.html
            inject:'head',
            title:'webpack is good',             //這個是傳遞的引數
            date:new Date()
        })
    ]
}

8.然後在終端輸入npm run webpack

9.效果截圖如下：
這裡寫圖片描述

我們發現有2個key，一個是files，一個是options

10.然後我們再對files和options進行遍歷
根目錄模板index.html程式碼如下：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ -->

    <!-- 接收引數 -->
    <title><%=htmlWebpackPlugin.options.title %></title>


  </head>
  <body>
    <!-- 注意這裡的等號代表輸出 -->
    <%= htmlWebpackPlugin.options.date %>

    <!-- 遍歷htmlWebpackPlugin.files -->
    <% for (var key in htmlWebpackPlugin.files){ %>
      <%= key %> : <%= JSON.stringify(htmlWebpackPlugin.files[key]) %>
    <% } %>

    <!-- 遍歷htmlWebpackPlugin.options -->
    <% for (var key in htmlWebpackPlugin.options){ %>
      <%= key %> : <%= JSON.stringify(htmlWebpackPlugin.options[key]) %>
    <% } %>
  </body>
</html>

11.在終端輸入npm run webpack進行打包

12.dist/js/index.html打包後生成的檔案程式碼如下：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ -->

    <!-- 接收引數 -->
    <title>webpack is good</title>


  <script type="text/javascript" src="js/main-df735bd75d7abb5252d2.js"></script><script type="text/javascript" src="js/a-58f74356e0c5391b7a38.js"></script></head>
  <body>
    <!-- 注意這裡的等號代表輸出 -->
    Sun Oct 29 2017 15:16:17 GMT+0800 (中國標準時間)

    <!-- 遍歷htmlWebpackPlugin.files -->

      publicPath : ""

      chunks : {"main":{"size":23,"entry":"js/main-df735bd75d7abb5252d2.js","hash":"df735bd75d7abb5252d2","css":[]},"a":{"size":31,"entry":"js/a-58f74356e0c5391b7a38.js","hash":"58f74356e0c5391b7a38","css":[]}}

      js : ["js/main-df735bd75d7abb5252d2.js","js/a-58f74356e0c5391b7a38.js"]

      css : []

      manifest : 


    <!-- 遍歷htmlWebpackPlugin.options -->

      template : "C:\\Users\\I love ljj\\Desktop\\webpackDemo\\node_modules\\[email protected]@html-webpack-plugin\\lib\\loader.js!C:\\Users\\I love ljj\\Desktop\\webpackDemo\\index.html"

      filename : "index.html"

      hash : false

      inject : "head"

      compile : true

      favicon : false

      minify : false

      cache : true

      showErrors : true

      chunks : "all"

      excludeChunks : []

      title : "webpack is good"

      xhtml : false

      date : "2017-10-29T07:16:17.048Z"

  </body>
</html>

13.比如我們的需求再複雜些，讓打包之後的js檔案一部分在head標籤中，一部分在body標籤中。

webpack.config.js程式碼如下：

var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

    entry:{                             //打包入口檔案
        main:'./src/script/main.js',
        a:'./src/script/a.js'
    },       
    output:{    
        path:__dirname + '/dist',    //打包後的檔案路徑
        filename:'js/[name]-[chunkhash].js'            //打包後的檔名
    },
    plugins:[
        new htmlWebpackPlugin({
            //注意傳的引數是一個物件
            filename:'index.html',
            template:'index.html',   //傳一個模板，就是根目錄下的index.html
            inject:false,
            title:'webpack is good',             //這個是傳遞的引數
            date:new Date()
        })
    ]
}

我們可以在根目錄模板index.html中的head標籤中加入這行程式碼，

<script type="text/javascript" src="<%= 
    htmlWebpackPlugin.files.chunks.main.entry %>"></script>

在根目錄模板index.html中的body標籤中加入這行程式碼，

<script type="text/javascript" src="<%= 
    htmlWebpackPlugin.files.chunks.a.entry %>"></script>

根目錄模板index.html程式碼如下：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ -->

    <!-- 接收引數 -->
    <title><%=htmlWebpackPlugin.options.title %></title>

    <script type="text/javascript" src="<%= 
    htmlWebpackPlugin.files.chunks.main.entry %>"></script>

  </head>
  <body>
    <!-- 注意這裡的等號代表輸出 -->
    <%= htmlWebpackPlugin.options.date %>

    <script type="text/javascript" src="<%= 
    htmlWebpackPlugin.files.chunks.a.entry %>"></script>
  </body>
</html>

14.在終端輸入npm run webpack進行打包

15.打包後截圖效果如下：
這裡寫圖片描述

16.如果我們打包之後需要上線怎麼辦，顯然上線後的地址跟本地的相對路徑顯示是不一樣是，那怎麼辦呢？其實我們可以在output中加入一行程式碼：publicPath:'http://cdn.com/'，注意這裡的http://cdn.com/地址需要改成你自己的地址

webpack.config.js程式碼如下：

var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

    entry:{                             //打包入口檔案
        main:'./src/script/main.js',
        a:'./src/script/a.js'
    },       
    output:{    
        path:__dirname + '/dist',    //打包後的檔案路徑
        filename:'js/[name]-[chunkhash].js',            //打包後的檔名
        publicPath:'http://cdn.com/'
    },
    plugins:[
        new htmlWebpackPlugin({
            //注意傳的引數是一個物件
            filename:'index.html',
            template:'index.html',   //傳一個模板，就是根目錄下的index.html
            inject:false,
            title:'webpack is good',             //這個是傳遞的引數
            date:new Date()
        })
    ]
}

結果 怎樣呢？

17.在終端輸入npm run webpack

18.打包後的效果截圖如下：
這裡寫圖片描述
這時候我們的地址都換成線上地址了，非常符合我們的需求！

18.如果需要上線，一般需要對HTML檔案進行壓縮，可以在webpack.config.js加入如下程式碼：

minify:{            //對打包後的HTML檔案進行壓縮
                removeComments:true,    //刪除註釋
                collapseWhitespace:true //刪除空格
            }

webpack.config.js程式碼如下：

var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

    entry:{                             //打包入口檔案
        main:'./src/script/main.js',
        a:'./src/script/a.js'
    },       
    output:{    
        path:__dirname + '/dist',    //打包後的檔案路徑
        filename:'js/[name]-[chunkhash].js',            //打包後的檔名
        publicPath:'http://cdn.com/'
    },
    plugins:[
        new htmlWebpackPlugin({
            //注意傳的引數是一個物件
            filename:'index.html',
            template:'index.html',   //傳一個模板，就是根目錄下的index.html
            inject:false,
            title:'webpack is good',             //這個是傳遞的引數
            date:new Date(),
            minify:{            //對打包後的HTML檔案進行壓縮
                removeComments:true,    //刪除註釋
                collapseWhitespace:true //刪除空格
            }
        })
    ]
}

19.在終端輸入npm run webpack進行打包

20.截圖效果如下：
這裡寫圖片描述
顯然打包後的index.html檔案被壓縮了，符合我們的需求！

相關推薦

自動化生成專案中的html頁面(上)

1.安裝外掛html-webpack-plugin 在終端輸入命令如下： cnpm install html-webpack-plugin –save-dev 2.進入webpack.config.js，加入一行程式碼，引用該外掛， var html

自動化生成專案中的html頁面(中)

1.如果我們需要在html-webpack-plugin外掛中傳引數，在模板中根目錄下的index.html模板中引用怎麼辦？我們可以在webpack.config.js檔案中寫入這麼一行程式碼：title:'webpack is good' webpac

在HTML頁面中獲取當前專案根路徑的方法

本文轉載於:猿2048網站在HTML頁面中獲取當前專案根路徑的方法 在HTML頁面獲取專案根路徑的方法： funct

html頁面中拍照和上傳照片那些事兒（二）

read itl 加載完成 大小 上傳照片 那些事 cnblogs 設置 新建 本文為原創，轉載請註明出處： cnzt 文章：cnzt-p http://www.cnblogs.com/zt-blog/p/6895352.html 本文主要說下iOS上

HTML頁面中固定變量的用法

index.php title 開始 中一 src .com 表示 init bsp <a href="index.php?m=search&c=index&a=init&typeid=&siteid=1&q={$title}

HTML頁面中JavaScript能獲取到的各種屏幕大小信息

windows 部分 菜單 div markdown doc rip oct 寬度 在HTML頁面中，通過JavaScript代碼訪問 window 對象，能夠獲取到很多表征屏幕大小的信息，下面列舉並加以區分。 window 對象中的屏幕信息 window.innerhei

在HTML頁面中加載js文件和css文件的方法

logs ext mar 頁面 document 文件 class link child 1.在HTML頁面加載js文件的方法： function loadScriptFile(filePath){ var script = document.createEle

[Winform-WebBrowser]-在html頁面中js調用winForm類方法

cti initial window row .html ebo tns 簡單 winform 在winform項目中嵌入了網頁，想通過html頁面調用後臺方法，如何實現呢？其實很簡單，主要有三部： 1、在被調用方法類上加上[ComVisible(true)]標簽

純html頁面中js如何獲得項目路徑

什麽 執行 TP ans 時間 完整 獲得 .com ip地址 js,全稱javascript,不過雖然是以java開頭，不過與java一點關系都沒有。 js和java有如下區別: (1)js是瀏覽器端的語言，而java是服務器端的語言。 (2)js是動態語言,java是靜

Html頁面中select下拉列表框別樣用法，一個方法一勞永逸。

select 異步加載很多時候，我們寫from表單面，給select標簽賦值，都采用這種方式：1.MVC中設創建公共的分部視圖；2.直接在前臺面中，插入片段後臺代碼；今天我利用HTML5中的自定義屬性，結合JQ擴展方法，寫一個通用的JS方法，JS代碼如下： $.fn.SetSelect = funct

H5 中html 頁面存為圖片並長按 保存

成功 實現 原因 ati data 比較 編碼解碼 轉換 萬能 最近接到的一個新需求：頁面一個靜態H5，中間有一頁是輸入信息，然後跳轉到最後一頁，自動將頁面生成圖片，用戶可以長按圖片保存到手機上。 展示一下最後一頁的樣子： 剛拿到這個需求，在網上看了很多文章，最普遍的是

HTML頁面中資料的回顯功能

在第一種方式中：頁面回顯，點選detail，頁面詳情會顯示一個新的頁面。這個是通過連結將頁面連結過去的。同時這個連結還連結到了一個新的js檔案中。用去調取後端的介面。 { title : '操作',

tp5 html頁面中 if else 判斷

// 建議當 判斷條件怎麼調也調不通時， 列印一下 $data,因為它有可能是這樣的資料結構 array(5) { [0] => string(0) "" [1] => string(0) "" [2] => string(0) "" [3] =>

在html頁面中判斷本地app是否安裝並開啟

html中其實是無法判斷應用是否安裝，除非在webview中通過js bridge，這裡通過一種方式達到此目的。 1、編輯AndroidManifest.xml：     主要是增加第二個<intent-filter>，myapp用來標識schema，最好能保證

ThinkPHP5 對html頁面中的url傳參操作

◆ 背景 畢竟PHP開發的框架多數都會和前端頁面巢狀使用，而不同的框架升級多少都會有所變化，這畢竟是其中的一個知識點吧，在我找不到方法前，考慮的是隱藏域提交“ID”，然後後臺post處理取出此ID，

jsp(out物件可以向html頁面中輸出）

<%@ page contentType="text/html;charset=UTF-8" language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ page import="java

使用Ajax在HTML頁面中區域性重新整理頁面（左邊選單右邊頁面）

index.html<a href="javascript:void(0);" onclick="loadXMLDoc('member.html')">檢視使用者</a><div id="mainbody">歡迎登入！</div>

php 如何在HTML頁面中實現對資料庫表資料的增刪改查

　　上一篇詳細說明了如何將資料庫中的資料列印到html頁面上，本篇將介紹如何在HTML頁面的表格裡進行對資料庫內容的增刪改查還是借用上一篇的頁面，在此基礎上增加了操作按鈕：<!doctype html><html><head><meta charset="utf-8"

在HTML頁面中插入Flash

你的目的就是在web頁面上加入flash吧，那樣很簡單啊，你直接在html程式碼中新增相應的程式碼就可以了，僅這些，和.net無關。    給你個完整的程式碼：<html><body bgcolor="gray"><div align="cen

根據地址獲取html頁面中的內容

private string GetHtml(string url) { // 獲取檔案 System.Text.Encoding en = System.Text.Encoding.GetEncoding("utf-8")