在项目中我们会不断的添加，优化代码，每次添加优化之后都需要打包进行再次上传更新。这时问题就回来了，每次打包出来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. 斗牛app上架应用宝、牛牛手机游戏推广、百人牛牛app应用开发、棋牌游戏上传、手游APP优化

    联系QQ:305-710439斗牛app上架应用宝.牛牛手机游戏推广.百人牛牛app应用开发.棋牌游戏上传.手游APP优化 iOS开发iPhone/iPad平台安卓手机软件开发机型覆盖范围 超过113 ...

  2. JavaScript ,Python,java,C#,Go系列算法之【插入排序篇】

    常见的内部排序算法有:插入排序.希尔排序.选择排序.冒泡排序.归并排序.快速排序.堆排序.基数排序等.用一张图概括: 插入排序 插入排序(英语:Insertion Sort)是一种简单直观的排序算法. ...

  3. Linux中Nginx反向代理下的tomcat集群

    Nginx具有反向代理(注意和正向代码的区别)和负载均衡等特点. 这次Nginx安装在 192.168.1.108 这台linux 机器上.安装Nginx 先要装openssl库,gcc,PCRE,z ...

  4. Java线程安全性中的对象发布和逸出

    发布(Publish)和逸出(Escape)这两个概念倒是第一次听说,不过它在实际当中却十分常见,这和Java并发编程的线程安全性就很大的关系. 什么是发布?简单来说就是提供一个对象的引用给作用域之外 ...

  5. windows 上优雅的安装 node 和 npm

    windows 的一键安装包,应该是最简单的 node 安装方式. 其实很多软件,拷贝过来就可以运行,根本不需要所谓的"安装"过程. 新建一个目录专门了管理 node 和 npm  ...

  6. Natas Wargame Level 12 Writeup（文件上传漏洞）

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAsQAAAChCAYAAADA86lDAAAABHNCSVQICAgIfAhkiAAAIABJREFUeF

  7. 使用SpringBoot快速构建应用程序

    1.Spring MVC和Spring Boot自带的web构建方式有所区别.Spring提供了spring-boot-starter-web自动配置模块. 2. 添加如下依赖 <depende ...

  8. Java反射机制详解(1) -反射定义

    首先,我们在开始前提出一个问题: 1.在运行时,对于一个java类,能否知道属性和方法:能否去调用它的任意方法? 答案是肯定的. 本节所有目录如下: 什么是JAVA的反射机制 JDK中提供的Refle ...

  9. [原创]CentOS下Mysql的日志回滚

    一.    环境: a)        Centos-6.5-x64位操作系统. b)        安装mysql.命令:yum install mysql* 二.    配置 a)        ...

  10. redis集群搭建实践

    参考 第一个节点 第一个节点为本地的机器 IP:192.168.23.148 检查机器配置 $ uname -a Linux wangya-Lenovo-G480 4.8.0-52-generic # ...