自動化生成專案中的html頁面(中)
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檔案被壓縮了,符合我們的需求!