HtmlWebpackPlugin插件使用实现html文件自动生成

开发公司项目vue+webpack，因为属于多入口文件项目，所以使用HtmlWebpackPlugin插件，该插件有两个作用：

- 为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题

- 可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口

- 首先用npm安装

- npm install html-webpack-plugin –save-dev

使用方法 webpack.config.js文件

//引入该插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
devtool: 'source-map',
entry: {
creditManagement: path.resolve(__dirname, './src/module/creditManagement/creditManagement.js'),
guaranteeProcess: path.resolve(__dirname, './src/module/guaranteeProcess/guaranteeProcess.js')
},
output: {
path: path.resolve(base.path),
publicPath: './../',
filename: 'js/[name].js'
},
plugins: [
new HtmlWebpackPlugin({
filename: 'html/creditManagement.html', //输出文件的文件名称，默认为index.html，不配置就是该文件名；此外，还可以为输出文件指定目录位置（例如'html/index.html'）
//关于filename补充两点：
//1、filename配置的html文件目录是相对于webpackConfig.output.path路径而言的，不是相对于当前项目目录结构的。
//2、指定生成的html文件内容中的link和script路径是相对于生成目录下的，写路径的
4000
时候请写生成目录下的相对路径。
template: './src/module/creditManagement/creditManagement.html',//本地模板文件的位置，支持加载器(如handlebars、ejs、undersore、html等)，如比如 handlebars!src/index.hbs；
//关于template补充几点：
//1、template配置项在html文件使用file-loader时，其所指定的位置找不到，导致生成的html文件内容不是期望的内容。
//2、为template指定的模板文件没有指定任何loader的话，默认使用ejs-loader。如template: './index.html'，若没有为.html指定任何loader就使用ejs-loader
inject: true,//向template或者templateContent中注入所有静态资源，不同的配置值注入的位置不经相同。
//1、true或者body：所有JavaScript资源插入到body元素的底部
//2、head: 所有JavaScript资源插入到head元素中
//3、false： 所有静态资源css和JavaScript都不会注入到模板文件中
chunks: ['creditManagement']//chunks：允许插入到模板中的一些chunk，不配置此项默认会将entry中所有的thunk注入到模板中。在配置多个页面时，每个页面注入的thunk应该是不相同的，需要通过该配置为不同页面注入不同的thunk；
}),
new HtmlWebpackPlugin({
filename: 'html/guaranteeProcess.html',
template: './src/module/guaranteeProcess/guaranteeProcess.html',
inject: true,
chunks: ['guaranteeProcess']
})
]