資訊專欄INFORMATION COLUMN
摘要：可以根據(jù)你設(shè)置的模板，在每次運(yùn)行后生成對應(yīng)的模板文件，同時(shí)所依賴的也都會被引入，如果中含有值，則生成的模板文件也會引入正確版本的文件。
上一節(jié)的入門中，只是跑通了一個(gè)很簡單的webpack項(xiàng)目的流程，對其中的參數(shù)以及實(shí)戰(zhàn)運(yùn)用中的一些用法并不太清楚，雖然目前工作項(xiàng)目中并沒有用起webpack，不過覺得還是需要再去摸索一番，以便可以更清楚的用起這個(gè)工具。
上一節(jié)最終運(yùn)行webpack命令，會在dist目錄下生成一個(gè)js文件，這時(shí)候新建一個(gè)index.html文件并引入這個(gè)js：
index.html
This is a test
Start:
這中間的f9be197eff25e8667c8c就是上一次運(yùn)行webpack命令時(shí)生成的hash值，如果每次對js改動(dòng)，然后運(yùn)行webpack命令，都會引起hash值的變化，也就是說每次都得在index.html中改變引入js的名稱，這樣顯然不合理，這時(shí)候可以引入一些插件來進(jìn)行一些流程上的優(yōu)化。
html-webpack-pluginhtml-webpack-plugin可以根據(jù)你設(shè)置的模板，在每次運(yùn)行后生成對應(yīng)的模板文件，同時(shí)所依賴的CSS/JS也都會被引入，如果CSS/JS中含有hash值，則html-webpack-plugin生成的模板文件也會引入正確版本的CSS/JS文件。
安裝（Install）npm install html-webpack-plugin --save-dev引入
在webpack.config.js中引入：
const HtmlWebpackPlugin = require("html-webpack-plugin");
配置
module.exports = {
entry: "./app/index.js",
output: {
...
},
module: {
...
},
plugins: [
new HtmlWebpackPlugin({
title: "This is the result",
filename: "./index.html",
template: "./app/index.html",
inject: "body",
favicon: "",
minify: {
caseSensitive: false,
collapseBooleanAttributes: true,
collapseWhitespace: true
},
hash: true,
cache: true,
showErrors: true,
chunks: "",
chunksSortMode: "auto",
excludeChunks: "",
xhtml: false
})
]
};
然后看一下這些參數(shù)的意義：
title: 生成的HTML模板的title，如果模板中有設(shè)置title的名字，則會忽略這里的設(shè)置
filename: 生成的模板文件的名字
template: 模板來源文件
inject: 引入模塊的注入位置；取值有true/false/body/head
favicon: 指定頁面圖標(biāo)；
minify: 是html-webpack-plugin中集成的 html-minifier ，生成模板文件壓縮配置，有很多配置項(xiàng)，可以查看詳細(xì)文檔
caseSensitive: false, //是否大小寫敏感 collapseBooleanAttributes: true, //是否簡寫boolean格式的屬性如：disabled="disabled" 簡寫為disabled collapseWhitespace: true //是否去除空格
hash: 是否生成hash添加在引入文件地址的末尾，類似于我們常用的時(shí)間戳，比如最終引入是：。這個(gè)可以避免緩存帶來的麻煩
cache: 是否需要緩存，如果填寫true，則文件只有在改變時(shí)才會重新生成
showErrors: 是否將錯(cuò)誤信息寫在頁面里，默認(rèn)true，出現(xiàn)錯(cuò)誤信息則會包裹在一個(gè)pre標(biāo)簽內(nèi)添加到頁面上
chunks: 引入的模塊，這里指定的是entry中設(shè)置多個(gè)js時(shí)，在這里指定引入的js，如果不設(shè)置則默認(rèn)全部引入
chunksSortMode: 引入模塊的排序方式
excludeChunks: 排除的模塊
xhtml: 生成的模板文檔中標(biāo)簽是否自動(dòng)關(guān)閉，針對xhtml的語法，會要求標(biāo)簽都關(guān)閉，默認(rèn)false
我的WebPack入門（一）[3]
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/81963.html
摘要：爭取早日能完全拋棄掉中文文檔，最終可以翻譯英文文檔，輸出英文文檔。待續(xù)相關(guān)文章入門學(xué)習(xí)手記一入門學(xué)習(xí)手記二入門學(xué)習(xí)手記三入門學(xué)習(xí)手記四 本人微信公眾號：前端修煉之路，歡迎關(guān)注。 showImg(https://segmentfault.com/img/bVbk0kO?w=1150&h=599); 之前用過gulp、grunt，但是一直沒有學(xué)習(xí)過webpack。這兩天剛好有時(shí)間，學(xué)習(xí)了下...
摘要：一初始化項(xiàng)目新建文件夾，文件名文件夾名稱不要用，這類關(guān)鍵字，后面使用插件時(shí)會發(fā)生錯(cuò)誤。未設(shè)置會報(bào)一個(gè)警告。四在項(xiàng)目中使用安裝。 一、初始化項(xiàng)目 新建文件夾，文件名firstreact 文件夾名稱不要用react，node這類關(guān)鍵字，后面使用插件時(shí)會發(fā)生錯(cuò)誤。 init項(xiàng)目環(huán)境，項(xiàng)目信息可默認(rèn)或自行修改 mkdir firstreact cd firstreact npm ...
摘要：四配置配置規(guī)則放在的數(shù)組里，每個(gè)是一個(gè)對象，是正則匹配，匹配文件后綴名，是要用是數(shù)組是所需要的是要加載哪些文件，是忽略掉哪些文件。實(shí)現(xiàn)解析，用會在寫入在文件頂端導(dǎo)入中加入插件。 最近研究webpack略有小成，特此寫篇博客。雖然webpack有官網(wǎng)api,但是個(gè)人認(rèn)為webpack api一點(diǎn)都不人性化， 不自己研究研究，根本看不懂。今天先從寫webpack-dev-server開始。...
摘要：概述開坑系列文章，不知道會寫到什么程度，畢竟寫文章并不在行，存在當(dāng)做筆記做，先不講理論，實(shí)踐先行。 0x000 概述 開坑 react 系列文章，不知道會寫到什么程度，畢竟寫文章并不在行，存在當(dāng)做筆記做，先不講理論，實(shí)踐先行。 0x001 創(chuàng)建項(xiàng)目 $ mkdir 0x001-helloworld $ cd 0x001-helloworld $ yarn init -y 0x0002 ...
摘要：如使用插件為我們自動(dòng)生成一個(gè)文件。安裝使用生產(chǎn)和開發(fā)構(gòu)建分離生產(chǎn)和開發(fā)中的構(gòu)建肯定是不同，生產(chǎn)中側(cè)重于一個(gè)更好的開發(fā)體驗(yàn)，而生產(chǎn)環(huán)境中則需要更多的性能優(yōu)化，更小的?？梢灾付钸\(yùn)行以來的配置文件，通過在中寫入是一種不錯(cuò)的方式。 原文地址：https://github.com/huruji/blog/issues/3 入口 單文件入口指定entry鍵值 const config = { ...
閱讀 792·2021-11-22 13:52
閱讀 1595·2021-09-27 13:36
閱讀 2912·2021-09-24 09:47
閱讀 2295·2021-09-22 15:48
閱讀 3658·2021-09-22 15:39
閱讀 1528·2019-08-30 12:43
閱讀 2980·2019-08-29 18:39
閱讀 3267·2019-08-29 12:51
