html-webpack-plugin怎么用-創(chuàng)新互聯(lián)

這篇文章將為大家詳細(xì)講解有關(guān)html-webpack-plugin怎么用，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

10年的磐安網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。營(yíng)銷(xiāo)型網(wǎng)站建設(shè)的優(yōu)勢(shì)是能夠根據(jù)用戶(hù)設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整磐安建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)從事“磐安網(wǎng)站設(shè)計(jì)”,“磐安網(wǎng)站推廣”以來(lái)，每個(gè)客戶(hù)項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

html-webpack-plugin 可能用過(guò)的 webpack 的童鞋都用過(guò)這個(gè) plugin ,就算沒(méi)用過(guò)可能也聽(tīng)過(guò)。我們?cè)趯W(xué)習(xí)webpack的時(shí)候，可能經(jīng)常會(huì)看到這樣的一段代碼。

// webpack.config.js
module.exports = {
  entry: path.resolve(__dirname, './app/index.js'),
  output:{
    path: path.resolve(__dirname, './build'),
    filename: 'bundle.js'
  }
  ...
  plugins: [
    new HtmlWebpackPlugin()
  ]
}

之后在終端輸入 webpack 命令后

webpack

你會(huì)神奇的看到在你的 build 文件夾會(huì)生成一個(gè) index.html 文件和一個(gè) bundle.js 文件，而且 index.html 文件中自動(dòng)引用 webpack 生成的 bundle.js 文件。

所有的這些都是 html-webpack-plugin 的功勞。它會(huì)自動(dòng)幫你生成一個(gè) html 文件，并且引用相關(guān)的 assets 文件(如 css, js)。

自己在六月第一次接觸前端自動(dòng)化構(gòu)建，學(xué)習(xí) webpack 和 react 時(shí)，曾經(jīng)簡(jiǎn)單使用過(guò)這個(gè)插件，但也只是用了常見(jiàn)的幾個(gè)選項(xiàng)，今天就跟著官方文檔走一走，看看它的所有用法。

title

顧名思義，設(shè)置生成的 html 文件的標(biāo)題。

filename

也沒(méi)什么說(shuō)的，生成 html 文件的文件名。默認(rèn)為 index.html.

template

根據(jù)自己的指定的模板文件來(lái)生成特定的 html 文件。這里的模板類(lèi)型可以是任意你喜歡的模板，可以是 html, jade, ejs, hbs, 等等，但是要注意的是，使用自定義的模板文件時(shí)，需要提前安裝對(duì)應(yīng)的 loader， 否則webpack不能正確解析。以 jade 為例。

npm install jade-loader --save-dev
// webpack.config.js
...
loaders: {
  ...
  {
    test: /\.jade$/,
    loader: 'jade'
  }
}
plugins: [
  new HtmlWebpackPlugin({
    ...
    jade: 'path/to/yourfile.jade'
  })
]

最終在build文件夾內(nèi)會(huì)生成一個(gè) yourfile.html 和 bundle.js 文件?，F(xiàn)在我們?cè)倩仡^來(lái)看看之前將的 title 屬性。

如果你既指定了 template 選項(xiàng)，又指定了 title 選項(xiàng)，那么webpack 會(huì)選擇哪一個(gè)？ 事實(shí)上，這時(shí)候會(huì)選擇你指定的模板文件的 title, 即使你的模板文件中未設(shè)置 title。

那么 filename 呢，是否也會(huì)覆蓋，其實(shí)不是，會(huì)以指定的 filename 作為文件名。

inject

注入選項(xiàng)。有四個(gè)選項(xiàng)值 true, body, head, false.

  1. true：默認(rèn)值，script標(biāo)簽位于html文件的 body 底部

  2. body：同 true

  3. head：script 標(biāo)簽位于 head 標(biāo)簽內(nèi)

  4. false：不插入生成的 js 文件，只是單純的生成一個(gè) html 文件

  5. favicon：給生成的 html 文件生成一個(gè) favicon。屬性值為 favicon 文件所在的路徑名。

// webpack.config.js
...
plugins: [
  new HtmlWebpackPlugin({
    ...
    favicon: 'path/to/yourfile.ico'
  }) 
]

生成的 html 標(biāo)簽中會(huì)包含這樣一個(gè) link 標(biāo)簽

<link rel="shortcut icon" href="example.ico" rel="external nofollow" >

同 title 和 filename 一樣，如果在模板文件指定了 favicon，會(huì)忽略該屬性。

minify

minify 的作用是對(duì) html 文件進(jìn)行壓縮，minify 的屬性值是一個(gè)壓縮選項(xiàng)或者 false 。默認(rèn)值為false, 不對(duì)生成的 html 文件進(jìn)行壓縮。來(lái)看看這個(gè)壓縮選項(xiàng)。

html-webpack-plugin 內(nèi)部集成了html-minifier ,這個(gè)壓縮選項(xiàng)同 html-minify 的壓縮選項(xiàng)完全一樣，
看一個(gè)簡(jiǎn)單的例子。

// webpack.config.js
...
plugins: [
  new HtmlWebpackPlugin({
    ...
    minify: {
      removeAttributeQuotes: true // 移除屬性的引號(hào)
    }
  })
]
<!-- 原h(huán)tml片段 -->
<div id="example" class="example">test minify</div>
<!-- 生成的html片段 -->
<div id=example class=example>test minify</div>

hash

hash選項(xiàng)的作用是 給生成的 js 文件一個(gè)獨(dú)特的 hash 值，該 hash 值是該次 webpack 編譯的 hash 值。默認(rèn)值為 false 。同樣看一個(gè)例子。

// webpack.config.js
plugins: [
  new HtmlWebpackPlugin({
    ...
    hash: true
  })
]
<script type=text/javascript src=bundle.js?22b9692e22e7be37b57e></script>

執(zhí)行 webpack 命令后，你會(huì)看到你的生成的 html 文件的 script 標(biāo)簽內(nèi)引用的 js 文件，是不是有點(diǎn)變化了。

bundle.js 文件后跟的一串 hash 值就是此次 webpack 編譯對(duì)應(yīng)的 hash 值。

$ webpack
Hash: 22b9692e22e7be37b57e
Version: webpack 1.13.2

cache

默認(rèn)值是 true。表示只有在內(nèi)容變化時(shí)才生成一個(gè)新的文件。

showErrors

showErrors 的作用是，如果 webpack 編譯出現(xiàn)錯(cuò)誤，webpack會(huì)將錯(cuò)誤信息包裹在一個(gè) pre 標(biāo)簽內(nèi)，屬性的默認(rèn)值為 true ，也就是顯示錯(cuò)誤信息。

chunks

chunks 選項(xiàng)的作用主要是針對(duì)多入口(entry)文件。當(dāng)你有多個(gè)入口文件的時(shí)候，對(duì)應(yīng)就會(huì)生成多個(gè)編譯后的 js 文件。那么 chunks 選項(xiàng)就可以決定是否都使用這些生成的 js 文件。

chunks 默認(rèn)會(huì)在生成的 html 文件中引用所有的 js 文件，當(dāng)然你也可以指定引入哪些特定的文件。

看一個(gè)小例子。

// webpack.config.js
entry: {
  index: path.resolve(__dirname, './src/index.js'),
  index1: path.resolve(__dirname, './src/index1.js'),
  index2: path.resolve(__dirname, './src/index2.js')
}
...
plugins: [
  new HtmlWebpackPlugin({
    ...
    chunks: ['index','index2']
  })
]

執(zhí)行 webpack 命令之后，你會(huì)看到生成的 index.html 文件中，只引用了 index.js 和 index2.js

...
<script type=text/javascript src=index.js></script>
<script type=text/javascript src=index2.js></script>

而如果沒(méi)有指定 chunks 選項(xiàng)，默認(rèn)會(huì)全部引用。

excludeChunks

弄懂了 chunks 之后，excludeChunks 選項(xiàng)也就好理解了，跟 chunks 是相反的，排除掉某些 js 文件。 比如上面的例子，其實(shí)等價(jià)于下面這一行

...
excludeChunks: ['index1.js']

chunksSortMode

這個(gè)選項(xiàng)決定了 script 標(biāo)簽的引用順序。默認(rèn)有四個(gè)選項(xiàng)，'none', 'auto', 'dependency', '{function}'。

  1. 'dependency' 不用說(shuō)，按照不同文件的依賴(lài)關(guān)系來(lái)排序。

  2. 'auto' 默認(rèn)值，插件的內(nèi)置的排序方式，具體順序這里我也不太清楚...

  3. 'none' 無(wú)序？ 不太清楚...

  4. {function} 提供一個(gè)函數(shù)？但是函數(shù)的參數(shù)又是什么? 不太清楚...

如果有使用過(guò)這個(gè)選項(xiàng)或者知道其具體含義的同學(xué)，還請(qǐng)告知一下。。。

xhtml

一個(gè)布爾值，默認(rèn)值是 false ，如果為 true ,則以兼容 xhtml 的模式引用文件。

關(guān)于“html-webpack-plugin怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線(xiàn)，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)頁(yè)標(biāo)題：html-webpack-plugin怎么用-創(chuàng)新互聯(lián)
轉(zhuǎn)載來(lái)源：http://muchs.cn/article26/dsjdjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、網(wǎng)站建設(shè)、企業(yè)建站、電子商務(wù)、網(wǎng)站內(nèi)鏈、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

商城網(wǎng)站建設(shè)