77.在webpack.config.js中添加minify,設置removeComments爲true,刪除模板中的註釋,修改內容如下
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: __dirname + "/app/Greeter.js",
output: {
path: __dirname + "/build",
filename: "bundle.js"
},
devServer:{
contentBase:"./public",
historyApiFallback:true,
inline:true
},
module:{
loaders:[
{
test:/\.json$/,
loader:"json-loader"
},
{
test:/\.js$/,
exclude:/node_modules/,
loader:'babel-loader'
},
{
test:/\.css$/,
loader:'style-loader!css-loader?modules'
}
]
},
plugins:[
new webpack.BannerPlugin("copyright suyan"),
new HtmlWebpackPlugin({
template:__dirname + "/app/index.tmpl.html",
title:'htmlwebpackplugin filename test',
filename:'filename.html',
inject:true,
hash:true,
minify:{
removeComments:true
}
})
]
}78.修改index.tmpl.html文件,修改內容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title><%= htmlWebpackPlugin.options.title %></title>
<link rel="stylesheet" href="">
</head>
<body>
<div id="root"></div>
<!-- comment -->
</body>
</html>
79.使用webpack命令打包
![wKioL1iqZ-ejUpaNAABYdPMtqbE578.png-wh_50]( "79.png")
80.查看生成的filename.html文件,生成內容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>htmlwebpackplugin filename test</title>
<link rel="stylesheet" href="">
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="bundle.js?7262b52dedc502c7d5fe"></script></body>
</html>
說明
在index.tmpl.html文件中我們編寫了註釋內容<!-- comment -->,但因我們在webpack.config.js文件中配置了minify:{
removeComments:true},所以在我們查看filename.html文件時並沒有註釋內容
