在之前的webpack学习中,我们将打包好的js文件引入html文件都是手动的,那么如何自动的将打包好的js文件与项目中的html文件关联呢?那么我们来介绍一下插件plugin。
一、安装plugin,我们在项目app-test下局部安装html-webpack-plugin,采用命令:npm install html-webpack-plugin --save-dev,安装成功显示信息为:
安装成功以在webpack.json文件里面devDependencies有显示html-webpack-plugin的版本,显示如下:
二、那么如何使用这个插件呢?
(1)我们在webpack.config.js文件里面引入:
const HtmlWebpackPlugin = require('html-webpack-plugin');
(2)然后在下面module.exports下面进行配置:
plugins:[
new HtmlWebpackPlugin()
]
现在webpack.config.js文件内容如下:
(3)利用npm run build命令运行一下,这时候在build文件夹下面多了一个index.html文件,它的内容如下:
上述图片显示,该index.html文件自动关联了打包好的三个js文件。
三、下面呢,我们会遇到一个问题,那就是在app-test下面的public下面的index.html的body里面写上“HELLO WORLD",但是呢,此时打开build下面的index.html,并不会显示HELLO WORLD,那么我们如何将它们关联呢?如果要关联的项目中有具体的html文件,要给html-webpack-plugin的构造函数传入template模板,操作如下:
此时打包好的文件index.html文件内容如下:
这时候我们用浏览器打开build文件夹下面的打包好的index.html,就会在页面中显示HELLO WORLD。
四、下面呢?又遇到了一个疑惑,为什么打包的文件名是Index.html呢?那是因为我们没有在html-webpack-plugin的构造函数中传入filename,默认打包文件名为index.html,如果传入filename:"app.html",那么打包以后的html文件就叫做app.html,而不是index.html。如下:
五、我们来了解一下html-webpack-plugin的构造函数中的title,它的作用就是给新打包的html文件给一个title,我们光谢如下内容是不行的:
那么我们还要做什么呢?那就是在关联的html文件里面去做关联,我们刚刚是把public下面的index.html进行打包,那我们就去public下面index.html下面进行关联,如何关联如下:
这时再重新运行npm run build,然后再用浏览器打开build下面的app.html,就会发现页面的title改变了,改成首页了。
六、我们来了解一下html-webpack-plugin的构造函数中的inject,它的作用是来确定被打包的html文件引入js,它的script标签应该放在什么地方,它的值有四个:false(不引入)、true(默认body)、head(放在头部)、body(放在body)。 下面我们来测试一下:
再看看打包以后的js文件引入所存放的位置,与之前的进行对比:
七、我们来了解一下html-webpack-plugin的构造函数中的hash,它的值有true和false,它的作用是用来做CDN缓存的,它的减少向服务器请求资源,把它缓存到本地,下面先看一下测试:
我们再来看看打包后的html文件中的js文件后面会跟一串hash值,如下:
八、我们来了解一下html-webpack-plugin的构造函数中的chunks,它的作用是选择你指定的加载块,下面我们来看测试:
那我们再来看看app.html打包文件的js如下:
我们可以看出打包文件只引入了我们指定的test.js和list.js。我们还有一个excludeChunks,它的作用就是引入除了指定的js文件以外的其他js文件,比如excludeChunks:'index',那么就会引入test和list。
微总结:本次主要了解了html-webpack-plugin这个插件,以及html-webpack-plugin的构造函数的一些参数,当然没有列举完,这是常用的,其他的不常用的可以去github上面看看它们的介绍。