以前我们使用webpack的时候,我们将程序通过webpack-dev-server模块自动的打包生成一个新的文件后,我们要将打包后的js文件引入到html中,使之在浏览器中得以显现.
xi.png
但通过手动的引入有个前提,你必须看的懂webpack.config.js中的配置
xixi.png
为了让我们写代码更方便,既是不懂得看配置也可以让它自动成功的引入html文件中,我们可以使用html-webpack-plugin ^_^
html-webpack-plugin插件:
主要作用：
- 1.它可以自动的将打包构建好的js文件,引入到html文件中
- 它甚至还可以自动的生成模板文件(.html)，比如单页面可以生成一个html文件入口，配置N个
html-webpack-plugin可以生成N*个页面入口
使用过程：
下载安装：npm i --save-dev html-webpack-plugin
配置
细节：这个插件与webpack-dev-server冲突。如果想要这个插件起作用就要将webpack.config.js注释掉dev-server对象这配置
const HtmlWebpackPlugin = require('html-webpack-plugin')
----------------------------------------------------------------------------------
//引入path模块
var path = require('path')
// 进行webpack打包构建时的配置，它是一个配置对象
// 这个配置以后需要引入之后才能使用:当然,不用我们自己引入,而是webpack自动引入的
module.exports = {
// 入口:你想打包构建的源文件路径--相对路径
entry:'./src/app.js',
// 输出:指定将源文件打包构建放置到?个文件夹?个文件名称
output:{
// 这个路径从webpack3.0版本以上开始,就需要是一个绝对路径
// 使用path方法指定文件目录
path:path.join(__dirname, 'dist'),
// 指定文件名称
filename:'bundle.js'
},
//html-webpack-plugin与该配置冲突要去除它,否则无法起作用
// devServer:{
// 设置你的托管资源的存放目录,同时这个目录提供外部的访问,默认会生成一个main.js
//publicPath:'/dist'
//},
plugins: [
new HtmlWebpackPlugin({
// 如果有模板html文件,指定模板源文件
template:'index111.html',
// 将模板文件打包构建为目标文件的名字
filename:'index.html',
// 指定js文件的插入位置
inject:'head'
})
]
}
由于该插件会自动生成一个html模板 , 它不会用我们原有的建立的html模板文件 , 当我们要向该自动生成模板中添加或修改某些东西的时候,我们就可以在HtmlWebpackPlugin({ })中添加配置.
补充说明：常见配置
- title：生成的html文档的标题。配置该项，它并不会替换指定模板文件中的title元素的内容，除非html模板文件中使用了模板引擎语法来获取该配置项值，可以在html页面中的title位置添加如下替换：<title><%= htmlWebpackPlugin.options.title %></title>
- filename：输出文件的文件名称，默认为index.html，不配置就是该文件名
- template：本地模板文件的位置，支持加载器(如handlebars、ejs、undersore、html等)，如果没有指定，那么就会自动的创建
-
inject：向template或者templateContent中注入所有静态资源，不同的配置值注入的位置不经相同,默认为true.
- true或者body：所有JavaScript资源插入到body元素的底部
- head: 所有JavaScript资源插入到head元素中
- false： 所有静态资源css和JavaScript都不会注入到模板文件中
- favicon: 添加特定favicon路径到输出的html文档中
