在项目中我们会不断的添加，优化代码，每次添加优化之后都需要打包进行再次上传更新。这时问题就回来了，每次打包出来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值，这样每次更新之后用户就会自动获取最新资源了。

webpack自动生成页面的更多相关文章

  1. webpack自动生成项目的html

    1 自动生成多个html页面 设置webpack.config.js中的plugins属性,多次调用plugin插件(new htmlWebpackPlugin()),同时设置对应数量的.js入口文件 ...

  2. ASP.NET使用HttpHandler进行页面静态化(自动生成页面)

    这次的Demo是,一个根页面,点击链接创建子页面,子页面都是一个Template页面进行替换的 一个根页面 <%@ Page Language="C#" AutoEventW ...

  3. 修复webpack自动刷新页面慢的问题

    新建.babelrc文件,配置如下 { "presets": [ "es2015" ], "ignore":[ "react-ro ...

  4. vue-cli + webpack自动生成项目

    # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack palanWebsit ...

  5. ASP.NET关于书籍详情和删除的Demo（HttpHandler进行页面静态化[自动生成html网页]+Entity Framework通过类创建数据库+EF删查）

    这次的Demo如标题所示, 首先第一步EF创建数据库 创建两个类,一个是图书类,一个是图书类别的类 using System; using System.Collections.Generic; us ...

  6. 微软Connect教程系列--自动生成增删改查页面工具介绍（二）

    本章课程描述了vs2015的三个特点,其中主要将描述在vs2015下面,使用命令自动生成增删改查界面,具体如下: 1.web.config文件不在存在,用config.json替代,以适应支撑vs的插 ...

  7. 高并发分布式系统中生成全局唯一（订单号）Id js返回上一页并刷新、返回上一页、自动刷新页面 父页面操作嵌套iframe子页面的HTML标签元素 .net判断System.Data.DataRow中是否包含某列 .Net使用system.Security.Cryptography.RNGCryptoServiceProvider类与System.Random类生成随机数

    高并发分布式系统中生成全局唯一(订单号)Id   1.GUID数据因毫无规律可言造成索引效率低下,影响了系统的性能,那么通过组合的方式,保留GUID的10个字节,用另6个字节表示GUID生成的时间(D ...

  8. 【微信】微信小程序 新建页面目录后，怎么自动生成目中的的四个基本文件呢？ 新建目录报错如下VM458:2 未找到 app.json 中的定义的 pages "pages/module/module" 对应的 WXML 文件

    如下图,在使用微信开发者工具过程中,新创建了页面目录,想要页面文件夹中自动生成四个基本文件 但是新创建了一个页面文件夹,里面的四个基本文件并没有展示出来 然后在app.json添加这个路径,ctrl+ ...

  9. 页面定制CSS代码初探（六）：h2、h3 标题自动生成序号 详细探索过程

    前言 最近在整理博客写作格式的规范,碰到一个问题:标题要不要加序号? 直到我碰到一个人这么说 手动维护编号实在是一件很闹心的事情, 如果位置靠前的某个段落被删除了, 那么几乎每个段落的编号都要手动修改 ...

随机推荐

  1. Java Map List 的使用

    项目中有一个需求是将年月分两行显示: java后台代码 创建一个demo,使用Map List 拆分年月: package demo; import java.util.ArrayList;impor ...

  2. SpringAOP原理

    原理 AOP(Aspect Oriented Programming),也就是面向方面编程的技术.AOP基于IoC基础,是对OOP的有益补充.AOP将应用系统分为两部分,核心业务逻辑(Core bus ...

  3. 调停者(Mediator)模式

    调停者模式是对象的行为模式.调停者模式包装了一系列对象相互作用的方式,使得这些对象不必相互明显引用.从而使它们可以较松散地耦合.当这些对象中的某些对象之间的相互作用发生改变时,不会立即影响到其他的一些 ...

  4. 精益IT组织与分享式领导

    精益IT组织       未来的组织将专注于同行业的产品或业务流--其他的一切,包括专家和管理者在内,都是为了让一线工作人员可以第一时间就做好,而又不会遇到任何麻烦.最大的制约不是技术:真正的挑战是变 ...

  5. wifi驱动总结（1）

    一.wifi平台设备驱动注册过程Path:Rtw_android.c (rk3399\kernel\drivers\net\wireless\rockchip_wlan\rtl8723au\os_de ...

  6. PHP 类的封装和使用

    类:相似的数据和数据操作的封装  class 成员量:普通的量加上一定的修饰就变成了成员量 public,protected,private 成员方法:普通的函数,加上一定的修饰,放入到类中就变成了成 ...

  7. gitlab 添加SSH Key

    1.登录http://domain/users/sign_in 2.选择"Profile Settings",进入"Profile Settings"设置页面 ...

  8. 【2017-05-21】WebForm跨页面传值取值、C#服务端跳转页面、 Button的OnClientClick属性、Js中getAttribute和超链接点击弹出警示框。

    一.跨页面传值和取值: 1.QueryString - url传值,地址传值 优缺点:不占用服务器内存:保密性差,传递长度有限. 通过跳转页面路径进行传值,方式: href="地址?key= ...

  9. ASP.NET Core MVC 模型绑定用法及原理

    前言 查询了一下关于 MVC 中的模型绑定,大部分都是关于如何使用的,以及模型绑定过程中的一些用法和概念,很少有关于模型绑定的内部机制实现的文章,本文就来讲解一下在 ASP.NET Core MVC ...

  10. （数字IC）低功耗设计入门（五）——RTL级低功耗设计（续）

    二.RTL级低功耗设计(续) 前面一篇博文我记录了操作数隔离等低功耗设计,这里就主要介绍一下使用门控时钟进行低功耗设计. (4)门控时钟 门控时钟在我的第一篇博客中有简单的描述,这里就进行比较详细的描 ...