自动化生成项目中的html
每次打包之后的文件名都是不确定的。每次都要手动去设html中引入的路径很麻烦。
借用webpack的插件来解决这个问题。
//先在项目中安装此插件
npm install html-webpack-plugin - -save-dev
如何使用：
//在webpack的配置文件中引入该插件
var htmlWebpackPlugin = require(‘html-we pack-plugin’)
module.exports = {
plugins:[
new htmlWebpackPlugin(
filename: ‘index-[hash].html’, //打包生成的html的名字
template: ‘index.html’, //以index.html为模版去打包生成html
inject: ‘head’ //指定引入的脚本是放在head里还是body里
)
]
}
当entry传入的是一个对象（多页面应用），意味着有多个页面，就需要去生成多个html。
module.exports = {
new htmlWebpackPlugin({
filename: ‘a.html’,
template: ‘index.html’,
inject: ‘body’,
title: ‘this is a.html’,
chunks: [‘main’, ‘a’] //页面所对应的js文件
}),
new htmlWebpackPlugin({
filename: ‘b.html’,
template: ‘index.html’,
inject: ‘body’,
title: ‘this is b.html’,
chunks: [‘b’], //页面所对应的js文件
excludeChunks: [‘a’] //排除文件，除了a其他的都要
})
}
把初始化的脚本直接嵌入到页面，而不是以连接的形式引入到页面，现在都是<script></script>标签引入的，会增加http的请求。
如果直接调用nodejs读取文件直接读取想要引入的文件有一点问题，就是如果直接引用了这个文件是不会经过webpack处理的。
如果想要引入经过webpack流处理过后的文件代码如下：
<script type=‘text/JavaScript’>
<% = compilation.assets[htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length).source()] %>
</script>
引入的是main.js。打包完成后的index.html的<script>标签里就会有main.js的内容
