详解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 相关文章推荐
javascript函数库-集合框架
Apr 27 Javascript
原生javascript获取元素样式属性值的方法
Dec 25 Javascript
JavaScript中的排序算法代码
Feb 22 Javascript
关于JavaScript中name的意义冲突示例介绍
May 29 Javascript
jQuery插件开发的五种形态小结
Mar 04 Javascript
JQuery中serialize() 序列化
Mar 13 Javascript
理解javascript异步编程
Jan 27 Javascript
JS得到当前时间的方法示例
Mar 24 Javascript
老生常谈jacascript DOM节点获取
Apr 17 Javascript
在node中如何使用 ES6
Apr 22 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
Jul 24 Javascript
vue 中filter的多种用法
Apr 26 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
PHILIPS L4X25T电路分析和打理
2021/03/02 无线电
phpMyAdmin 安装配置方法和问题解决
2009/06/08 PHP
Windows PHP5和Apache的安装与配置
2009/06/08 PHP
测试php函数的方法
2013/11/13 PHP
php实现上传图片生成缩略图示例
2014/04/13 PHP
PHP实现获取FLV文件的时间
2015/02/10 PHP
PHP的PDO操作简单示例
2016/03/30 PHP
php面向对象的用户登录身份验证
2017/06/08 PHP
ExtJs 表单提交登陆实现代码
2010/08/19 Javascript
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
2011/07/26 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
2016/05/25 Javascript
AngularJS 过滤与排序详解及实例代码
2016/09/14 Javascript
微信小程序 动态传参实例详解
2017/04/27 Javascript
浅谈vue.js中v-for循环渲染
2017/07/26 Javascript
jQuery插件Validation表单验证详解
2018/05/26 jQuery
Layui tree 下拉菜单树的实例代码
2019/09/21 Javascript
vue组件实现移动端九宫格转盘抽奖
2020/10/16 Javascript
python中实现迭代器(iterator)的方法示例
2017/01/19 Python
点球小游戏python脚本
2018/05/22 Python
Python求一批字符串的最长公共前缀算法示例
2019/03/02 Python
Python企业编码生成系统之主程序模块设计详解
2019/07/26 Python
使用python实现学生信息管理系统
2021/02/25 Python
HTML5之SVG 2D入门4—笔画与填充
2013/01/30 HTML / CSS
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
2013/04/24 HTML / CSS
生产现场工艺工程师岗位职责
2013/11/28 职场文书
手机业务员岗位职责
2013/12/13 职场文书
会计主管岗位职责
2014/01/03 职场文书
国培远程培训感言
2014/03/08 职场文书
毕业设计说明书
2014/05/07 职场文书
项目经理岗位职责范本
2015/04/01 职场文书
2015学校师德师风工作总结
2015/04/22 职场文书
入队仪式主持词
2015/07/04 职场文书
python爬虫之selenium库的安装及使用教程
2021/05/23 Python
Python爬虫实战之爬取携程评论
2021/06/02 Python
学习nginx基础知识
2021/09/04 Servers
Python学习之时间包使用教程详解
2022/03/21 Python