自动化生成项目中的html页面(上)
那么问题来了，之前我们是在html模板上写死的文件名，这下怎么办呢？
<script src="dist.js"></script>
借助webpack的一个插件就可以解决
1、安装这个插件
npm install html-webpack-plugin --save-dev
2、安装完成，使用
官网上关于使用插件的文档：
https://webpack.js.org/concepts/plugins/#usage
//引入插件
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry:['./src/script/main.js'],
output:{
path:'./dist/js',
filename:'[name]-[chunkhash].js'
},
plugins:[
new htmlWebpackPlugin()
]
}
3、执行webpack打包，我们发现在dist/目录下不仅生成了我们编译之后的js文件main-hash值.js，还生成了一个index.html模板文件。这个html模板文件，已经引入了我们编译之后的js了。
//html模板文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<script type="text/javascript" src="main-d0c207a8377feb008582.js"></script></body>
</html>
建立联系
但是dist/目录下的index.html，并不是我们定义在根目录下的index.html，这不满足我们的项目需求。
我们需要给html-webpack-plugin插件传递一个参数：template
plugins:[
new htmlWebpackPlugin({
template:'index.html'
})
]
指定使用我们根目录下的index.html模板(打包之后的html模板以此为基础)。
我们再次打包，发现现在dist/下的index.html模板有些不同了：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"
<title>webpack-test</title>
</head>
<body>
<script src="bundle.js"></script>
<script type="text/javascript" src="main-d0c207a8377feb008582.js"></script></body>
</html>
相当于是在我们根目录index.html里插入了:
<script type="text/javascript" src="main-d0c207a8377feb008582.js"></script>
我们修改根目录下的index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"
<title>根目录下的html</title>
</head>
<body>
</body>
</html>
然后再次执行webpack打包命令，查看编译之后的模板
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"
<title>更目录下的html</title>
</head>
<body>
<script type="text/javascript" src="main-d0c207a8377feb008582.js"></script></body>
</html>
这样，其实编译之后的html就和我们自己的index.html模板建立联系了。
我们不想把编译之后的index.html放在dist/js目录下
我们dist/js目录下只想要js文件，html文件我们希望放到dist目录下。
修改webpack.config.js中的output项：
output:{
path:'./dist',
filename:'js/[name]-[chunkhash].js'
},
html-webpack-plugin插件的其他几个参数
html-webpack-plugin插件传递参数，除了template外，还有其他一些参数
plugins:[
new htmlWebpackPlugin({
//注意传的参数是一个对象
filename:'index-[hash].html', //打包好的html名称
template:'index.html', //传一个模板，就是根目录下的index.html
inject:'head', // script标签的插入位置 head表示插入到html的head标签中
})
]
inject: script标签的插入位置
注入选项。有四个选项值 true, body, head, false.
true：默认值，script标签位于html文件的 body 底部
body：script标签位于html文件的 body 底部（同 true）
head：script 标签位于 head 标签内
false：不插入生成的 js 文件，只是单纯的生成一个 html 文件