在项目中我们会不断的添加，优化代码，每次添加优化之后都需要打包进行再次上传更新。这时问题就回来了，每次打包出来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. 在iOS应用程序中使用Frida绕过越狱检测

           阿里聚安全在之前的三篇博客中介绍了利用Frida攻击Android应用程序,整个过程仿佛让开发者开启上帝视角,在本篇博客中,我们将会介绍在iOS应用程序中使用Frida绕过越狱检测.即使 ...

  2. 学习笔记：javascript内置对象：字符串对象

    1.字符串的创建   var str = "Hello Microsoft!";   2.字符串属性   constructor  返回创建字符串属性的函数   length    ...

  3. Fail-Fast机制详解

    Java中的Iterator非常方便地为所有的数据源提供了一个统一的数据读取(删除)的接口,但是在使用的时候容易报如下错误ConcurrentModificationException,原因是在使用迭 ...

  4. XInput和DirectInput

    原文链接:https://msdn.microsoft.com/en-us/library/windows/desktop/ee417014(v=vs.85).aspx XInput是一个允许应用从W ...

  5. VueJs生产环境部署

    VueJs为客户端语言,所以部署的时候是不需要基于nodejs或其他服务器运行环境,只需要像其他静态站点的方式发布就可以了,下面介绍一下VueJs具体发布的流程还有需要注意的点. 先来看VueJs最终 ...

  6. 项目管理之 Objective-C 编码规范

    目录: 一.格式化代码 二.命名 命名要求 1. 类的命名: 规则: 大驼峰命名法,每个单词的首字母都采用大写字母.一般添加业务前缀.后缀一般是当前类的种类. ViewController:后缀:Vi ...

  7. elasticsearch 2.0+ 安装 Marvel

    Marvel 2.0+ Compatible with the latest versions of Elasticsearch and Kibana Step 1: Install Marvel i ...

  8. grant all赋权后mysql.user表权限字段还是N,但能登录和新建表

    grant all赋权后mysql.user表权限字段还是N,但能登录和新建表 grant all privileges on linuxeye.* to linuxeye@'localhost' i ...

  9. jQuery插件 -- 图片随页面滚动fixed

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. html 获取宽高

    jquery获取元素宽高的方法如下 1.元素自身高度 $("#div").height(); 2.元素自身高度 + padding $("#div").inne ...