详解webpack自动生成html页面

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解webpack自动生成html页面

    在项目中我们会不断的添加,优化代码,每次添加优化之后都需要打包进行再次上传更新.这时问题就回来了,每次打包出来js,css文件的名字都是一样的,在首页index.html的引用也不会变,这样老用户在访问这个页面时看到就会是浏览器缓存的版本,而不是最新的版本,想要看到最新版本还要进行清缓存,强制刷新,这显然是不可能的,那我们要如何解决这个问题呢? 首先有同学可能想到每次打包之后我改一下打包出来文件的名字,然后在首页index,html里面把引用代码里的文件名字也改掉就可以了,这种方法是可以的,但是

  • 详解angularJS动态生成的页面中ng-click无效解决办法

    今天碰到了一个这样的需求,在自己写的动态的页面中,写入的AngularJS无效不能点击响应事件,以下给出代码以及解决方案 1.首先将我们要赋值给页面的数据new一下 var html = "<a href='javascript:void(0);' ng-click='test()'></a>" 2.用$compile函数编译一下上边的内容 var $html = $compile(html)($scope); 3.将编译好的内容插入到页面中 $("b

  • 详解webpack 打包文件体积过大解决方案（code splitting）

    优化对比 : 未优化前:index.html引入一个main.js文件,体积2M以上. 优化后入:index.html引入main.js.commons.js.charts.js.other.js.以达到将main.js平分目的.每个文件控制300k以内.(如果高兴100k也没问题) 用到的一堆库及工具: vue.webpack.babel.highcharts.echarts.jquery.html2canvas******此去省略若干m代码 问题: 开发环境用webpack后发现单个js文件

  • 详解webpack模块化管理和打包工具

    本篇文章主要介绍了详解webpack模块化管理和打包工具,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 Webpack简介 webpack是当下最热门的前端资源模块化管理和打包工具. 它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际 需要的时候再异步加载.通过 loader  的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块. AMD 模块. ES6 模块.CSS.图片. JSON.

  • 详解webpack 入门与解析

    每次学新东西总感觉自己是不是变笨了,看了几个博客,试着试着就跑不下去,无奈只有去看官方文档. webpack是基于node的.先安装最新的node. 1.初始化 安装node后,新建一个目录,比如html5.cmd中切到当前文件夹. npm init -y 这个命令会创建一个默认的package.json.它包含了项目的一些配置参数,通过它可以进行初始安装.详细参数:https://docs.npmjs.com/files/package.json. 不要y参数的话,会在命令框中设置各项参数,但

  • 一文详解webpack中loader与plugin的区别

    目录 一.Loader 1.loader的作用: 2.loader的工作原理: 3. Loader 执行顺序 4.如何开发一个loader 二.Plugin 1.plugin解决其他的更多的自动化打包工作 2.自定义插件 常见的Loader和Plugin loader: plugin: 一.Loader 1.loader的作用: webpack 只能直接处理 javascript 格式的代码.任何非 js 文件都必须被预先处理转换为 js 代码,才可以参与打包.loader(加载器)就是这样一个

  • 详解webpack的文件监听实现(热更新)

    前言 文件监听是在源码发生变化时,自动重新构建出新的输出文件. webpack 开启监听模式,有两种方式: 1.启动 webpack 命令时,带上 --watch 参数.  唯一缺点:需要手动刷新才能看到变化: 2.在配置 webpack.config.js 中设置 watch: true.  优点: (1) WDS 不刷新浏览器 (2) WDS 不输出文件,⽽是放在内存中 (3) 使⽤用 HotModuleReplacementPlugin 插件 1 第一种方式, --watch 1.1 配置

  • 详解Python如何生成优雅的二维码

    详解Python如何生成优雅的二维码

    目录 一.使用MyQR生成二维码 (1)模块安装 (2)生成一个图像二维码 二.使用qrcode生成二维码 (1)模块安装 (2)更准确的生成二维码 (3)读取二维码中的数据 二维码作为一种信息传递的工具,在当今社会发挥了重要作用.从手机用户登录到手机支付,生活的各个角落都能看到二维码的存在,那么我们如何自己生成一个二维码呢?如果使用Python,我们可以很快的生成一个二维码,我们可以自己定义二维码包含的信息.这些信息可以是文字.图片,也可以是网站.下面我们就来看看如何生成一个二维码. 一.使用

  • 详解hibernate自动创建表的配置

    详解hibernate自动创建表的配置 配置自动创建表: <prop key="hibernate.hbm2ddl.auto">update</prop>//首次创建项目时用,项目稳定后一般注释这里有4个值: update:表示自动根据model对象来更新表结构,启动hibernate时会自动检查数据库,如果缺少表,则自动建表:如果表里缺少列,则自动添加列. 还有其他的参数: create:启动hibernate时,自动删除原来的表,新建所有的表,所以每次启动后

  • 详解webpack之scss和postcss-loader的配置

    本文介绍了详解webpack之scss和postcss-loader的配置,分享给大家,具体如下: 开始 npm i sass-loader node-sass postcss-loader autoprefixer 首先配置postcss-loader 在这里postcss是为了来给浏览器内核添加私有前缀.当前postcss还有其他操作比如px2rem之类的.可以把postcss想象成babel-core只是一个控制中心,主要的还是它分散出来的插件. /**** package.json **

随机推荐