... <body> <script src="https://www.jb51.net/article/dist/main.js"></script> <script src="https://www.jb51.net/article/dist/vendor.js"></script> <script src="https://www.jb51.net/article/dist/manifest.js"></script> </body> ...
以上写法是不对的，因为缺少了可变的hash值，因此我们希望每次打包后index.html中的路径也会自动加上hash值，解决方法如下：
var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { ... plugins:[ ... new HtmlWebpackPlugin({ title: 'demo', template: 'index.html' // 模板路径 }), ... ] ... }
上方我们引入了html-webpack-plugin这一个插件，该插件可以帮助我们根据模板生成html文件。在plugins设置中，title配置了生成html中的title部分，template为模板html的路径地址。
我们需要下载html-webpack-plugin：
npm install html-webpack-plugin --save-dev
安装和配置完毕后，运行打包命令：webpack
Hash: 0c4b91e206579b31544d Version: webpack 2.3.2 Time: 856ms Asset Size Chunks Chunk Names vendor.e1868.js 268 kB 0 [emitted] [big] vendor main.44412.js 337 bytes 1 [emitted] main manifest.ed186.js 5.81 kB 2 [emitted] manifest index.html 292 bytes [emitted] [0] ./~/jquery/dist/jquery.js 267 kB {0} [built] [1] ./app/hello.js 50 bytes {1} [built] [2] ./app/index.js 114 bytes {1} [built] [3] multi jquery 28 bytes {0} [built]
我们发现在dist目录下生成了一个index.html文件，打开该文件后代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>demo</title> </head> <body> <script type="text/javascript" src="https://www.jb51.net/manifest.ed186.js"></script> <script type="text/javascript" src="https://www.jb51.net/vendor.e1868.js"></script> <script type="text/javascript" src="https://www.jb51.net/main.44412.js"></script> </body> </html>
至此我们实现了每次打包后index.html中的路径也会自动加上hash值的功能，因此dist目录下的index.html即为以后的首页文件，最后我们在浏览器中打开该文件成功显示：
结语
本文在webpack入门的基础上讲解了webpack独立打包与缓存处理的方式
实例代码已上传我的github，地址为：https://github.com/luozhihao/webpack-course/tree/master/vendor， 供参考。
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
您可能感兴趣的文章: