在项目中我们会不断的添加，优化代码，每次添加优化之后都需要打包进行再次上传更新。这时问题就回来了，每次打包出来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. OC—不可变字符串NSString

  2. hdu4171 Paper Route 树的性质+DFS

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4171 题意: 有n+1个点,这n+1个点由n条边相连,且保证连通.然后给出各个点到出口的距离,要求从 ...

  3. java中一个重要思想：面向对象

    面向对象: 1, 面向过程的思想(合适的方法出现在合适的类里面) 准备去一个地方: 先买车, 挂牌, 开导航, 踩油门, 过黄河, 穿越珠穆朗玛峰... 2, 面向对象的思想 我开着车去, 车怎么去随 ...

  4. protobuf那些事

    大家好,俺又来写博客了.......上次剧情预告说,这次会写hive的博客.......好吧,那俺就不打算写hive了.......老码农路子就是要野(本人不老,不能说得影响了找女票)......这次 ...

  5. React入门---开始前的准备(上)-2

    开始前准备: 1.安装配置nodeJs(nodeJS官网) 检查安装成功: node -v npm -v 2.使用NPM配置React开发环境 (1). 创建项目文件夹(创建文件夹时,文件夹名不要起为 ...

  6. 作为.net程序员学jsp，伤不起

    <%@page import="java.sql.*"%> <%@ page language="java" import="jav ...

  7. (HTTPS)-https原理及tomcat配置https方法

    一. 什么是HTTPS 在说HTTPS之前先说说什么是HTTP,HTTP就是我们平时浏览网页时候使用的一种协议.HTTP协议传 输的数据都是未加密的,也就是明文的,因此使用HTTP协议传输隐私信息非常 ...

  8. jquery和vue对比

    1.jquery介绍:想必大家都用过jquery吧,这个曾经也是现在依然最流行的web前端js库,可是现在无论是国内还是国外他的使用率正在渐渐被其他的js库所代替,随着浏览器厂商对HTML5规范统一遵 ...

  9. Ajax02 json

    1 什么是json JavaScript Object Notation(JavaScript 对象表示法) 是一种轻量级的数据交换格式. 注: 数据交换:将数据先转换成一种与平台无关的数据 格式(比 ...

  10. 关于RFID2.4G 标签卡最新方案

    它是一款针对RFID有源卡行业设计的,是一款单向的2.4G频段RF射频芯片,目前主要针对低功耗的校讯通, 2.4G停车场,电动车防盗, 闪光灯设备(引闪器) ,智能家居等领域.SI24R2E 同样与S ...