详解webpack自动生成html页面


Posted in Javascript onJune 29, 2017

在项目中我们会不断的添加,优化代码,每次添加优化之后都需要打包进行再次上传更新。这时问题就回来了,每次打包出来js,css文件的名字都是一样的,在首页index.html的引用也不会变,这样老用户在访问这个页面时看到就会是浏览器缓存的版本,而不是最新的版本,想要看到最新版本还要进行清缓存,强制刷新,这显然是不可能的,那我们要如何解决这个问题呢?

首先有同学可能想到每次打包之后我改一下打包出来文件的名字,然后在首页index,html里面把引用代码里的文件名字也改掉就可以了,这种方法是可以的,但是每次都要改这么多,显然会很耗费时间,而且人工手动修改很可能也会带来bug。又有一位同学可能会说,不用那么麻烦,直接在上线前,在css,js资源引用的后面加一个随机数就可以了。这种方法虽然比第一种方法简单了许多,但是还是没有解决之前的问题。那么我们能不能实现每次打包完直接生成的文件后面加上一个随机字符串,然后首页里的引用也一起自动变成最新打包的文件呢?答案是可以的,接下来我将讲一下利用webpack实现

webpack实现这个功能,首先要下载一个webpack的插件html-webpack-plugin

npm install html-webpack-plugin

接下来要在羡慕里新建一个文件,这个文件就是我们要生成的首页文件的模板

//template.js
module.exports = function (templateParams) {
 return (
  `<!DOCTYPE html>
  <html>
  <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title> ${templateParams.htmlWebpackPlugin.options.title} </title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
  <meta name="author" content=""/>
  <meta name="keywords" content="">
  <meta name="description" content="">
  <meta name="HandheldFriendly" content="true">
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta http-equiv="Cache-Control" content="no-transform">
  <meta http-equiv="Cache-Control" content="no-siteapp">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="default">
  <!--other: default, black, black-translucent-->
  <meta name="format-detection" content="telephone=no">
  </head>
  <script>
   function hasToken() {
    var result = /ztoken/g.test(document.cookie) && !(document.cookie.split('ztoken=')[1].split(';')[0] === '');
    return result
   }
   function clearCookieAll() {
    var keys = document.cookie.match(/[^ =;]+(?=\=)/g);
    if (keys) {
     for (var i = keys.length; i--;)
      document.cookie = keys[i] + '=0;expires=' + new Date(0).toUTCString()
    }
   }
   if (!hasToken()) {
    console.warn('无效token')
    clearCookieAll()
    window.location.href = '/index.html'
   }
  </script>
  <body>
  <div id="root" style="height:100%"></div>
  <!--<div>development mode</div>-->
  </body>
  </html>`
 )
}

准备工作做好了,接下来就是进行配置了

//首先引入插件
var HtmlWebpackPlugin = require('html-webpack-plugin');

界限来在配置webpack的plugins选项

plugins: [
 new HtmlWebpackPlugin({            //根据模板插入css/js等生成最终HTML
       // favicon:'./src/img/favicon.ico', //favicon路径
       filename:'src/index.html',  //生成的html存放路径,相对于 path
       template:'./src/app/template/template.js',  //html模板路径
       title: '升级空间运营后台',
       cache: true,
       inject:true,  //允许插件修改哪些内容,包括head与body
       hash:true,  //为静态资源生成hash值
       minify:{  //压缩HTML文件
         removeComments:true,  //移除HTML中的注释
          collapseWhitespace:false  //删除空白符与换行符
       }
    })
],

执行打包命令后,你会发现生成自动生了HTML代码,在index,html资源引用的地方会在资源后面自动生成一串hash值,这样每次更新之后用户就会自动获取最新资源了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
纯js简单日历实现代码
Oct 05 Javascript
JavaScript数值数组排序示例分享
May 27 Javascript
jQuery中filter()方法用法实例
Jan 06 Javascript
概述jQuery的元素筛选
Nov 23 Javascript
Angularjs按需查询实例代码
Oct 30 Javascript
深入浅析Vue.js中 computed和methods不同机制
Mar 22 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
Jul 05 Javascript
解决layui的table插件无法多层级获取json数据的问题
Sep 19 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
Aug 08 Javascript
Vue 构造选项 - 进阶使用说明
Aug 14 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 Vue.js
JavaScript 判断浏览器是否是IE
Feb 19 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
Jun 29 #Javascript
详解webpack分包及异步加载套路
Jun 29 #Javascript
JavaScript之map reduce_动力节点Java学院整理
Jun 29 #Javascript
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
Jun 29 #Javascript
JavaScript之iterable_动力节点Java学院整理
Jun 29 #Javascript
JavaScript之Map和Set_动力节点Java学院整理
Jun 29 #Javascript
JavaScript之面向对象_动力节点Java学院整理
Jun 29 #Javascript
You might like
PHP stream_context_create()作用和用法分析
2011/03/29 PHP
如何在php中正确的使用json
2013/08/06 PHP
Laravel5中Cookie的使用详解
2017/05/03 PHP
PHP面向对象五大原则之接口隔离原则(ISP)详解
2018/04/04 PHP
PHP实现压缩图片尺寸并转为jpg格式的方法示例
2018/05/10 PHP
tp5框架内使用tp3.2分页的方法分析
2019/05/05 PHP
在laravel中使用with实现动态添加where条件
2019/10/10 PHP
如何用javascript控制上传文件的大小
2006/10/26 Javascript
用 Javascript 验证表单(form)中的单选(radio)值
2009/09/08 Javascript
jQuery调用WebService的实现代码
2011/06/19 Javascript
Jquery Change与bind事件代码
2011/09/29 Javascript
让元素在网页中可拖动示例代码
2013/08/13 Javascript
js函数名与form表单元素同名冲突的问题
2014/03/07 Javascript
禁用Tab键JS代码兼容Firefox和IE
2014/04/18 Javascript
Javascript中的getUTCHours()方法使用详解
2015/06/10 Javascript
javascript实现网页背景烟花效果的方法
2015/08/06 Javascript
基于jQuery实现二级下拉菜单效果
2016/02/01 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
2016/10/25 Javascript
vue脚手架中配置Sass的方法
2018/01/04 Javascript
react-native-video实现视频全屏播放的方法
2018/03/19 Javascript
Vue中的scoped实现原理及穿透方法
2018/05/15 Javascript
Vue组件全局注册实现警告框的实例详解
2018/06/11 Javascript
基于vue.js实现购物车
2020/01/15 Javascript
基于vue实现探探滑动组件功能
2020/05/29 Javascript
[52:10]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第二场 6.3
2018/06/04 DOTA
python利用hook技术破解https的实例代码
2013/03/25 Python
python生成验证码图片代码分享
2016/01/28 Python
初探TensorFLow从文件读取图片的四种方式
2018/02/06 Python
彻底解决Python包下载慢问题
2020/11/15 Python
python操作toml文件的示例代码
2020/11/27 Python
CSS3实现千变万化的文字阴影text-shadow效果设计
2016/04/26 HTML / CSS
HTML5 Canvas鼠标与键盘事件demo示例
2013/07/04 HTML / CSS
解释一下Windows的消息机制
2014/01/30 面试题
教师的实习自我鉴定
2013/12/17 职场文书
商场收银员岗位职责
2015/04/07 职场文书
如何开发一个渐进式Web应用程序PWA
2021/05/10 Javascript