Leveraging the browser cache is an important part of page load performance. A great way to utilize this cache is by versioning your resources. In this lesson, learn how to use Webpack’s hashing feature so you can take advantage of long term caching of your assets.

Install:

npm install -D html-webpack-plugin

Webpack.config.js

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const isTest = process.env.NODE_ENV === "test";
module.exports = env => {
return {
entry: './js/app.js',
output: {
filename: 'bundle.[chunkhash].js',
path: resolve(__dirname, 'dist'),
pathinfo: true,
},
context: resolve(__dirname, 'src'),
devtool: env.prod ? 'source-map' : 'eval',
module: {
loaders: [
{test: /\.js$/, loader: 'babel!eslint', exclude: /node_modules/},
{test: /\.css$/, loader: 'style!css'},
],
},
plugins:[
new HtmlWebpackPlugin(
{
template: './index.html'
}
)
]
}
}

Remove bundle.js in index.html

Then in the browser you can see the bundle file has hash name. So everytime, you change the source code, it will update automatically

[Webpack 2] Hashing with Webpack for long term caching的更多相关文章

  1. [Webpack] Use the Webpack Dashboard to Monitor Webpack Operations

    Learn how to use the new Webpack Dashboard from Formidable Labs to display a pretty, useful output f ...

  2. webpack 4.0 配置文件 webpack.config.js文件的放置位置

    一般webpack.config.js是默认放在根目录的,不在根目录的时候需要在package.json中制定位置,我的配置文件目录是config/webpack.config.js,在package ...

  3. 前端自动化构建工具webpack (一)之webpack安装 和 设置webpack.confi.js

    目的:  模块化开发,组件化开发,让代码符合开发规范,更高效 webpack作用:从pack,就知道这是包的意思,比较专业点叫做前端自动化打包构建工具,代码错误检查,预处理,文件合并(打包),代码压缩 ...

  4. webpack快速入门——给webpack增加babel支持

    1.Babel的安装与配置 Babel其实是几个模块化的包,其核心功能位于称为babel-core的npm包中,webpack可以把其不同的包整合在一起使用,对于每一个 你需要的功能或拓展,你都需要安 ...

  5. 【webpack】---模块打包机webpack基础使用---【巷子】

    001.什么是webpack? 作用有哪些? WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,Ty ...

  6. webpack One CLI for webpack must be installed. These are recommended choices, delivered as separate(webpack报错)

    用webpack 打包项目的时候:webpack js.js bundle.js 报错. 最近在安装好webpack后,使用时,提示 One CLI for webpack must be insta ...

  7. Webpack学习笔记九 webpack优化总结

    webpack 优化笔记 webpack4 自带的优化包括 swingTree(摇摆树)和作用域提升 swingTree 比如入口文件 index.js引入通用方法 util, 里面有 10个方法, ...

  8. vue 项目中 自定义 webpack 的 配置文件(webpack.config.babel.js)

    webpack.config.babel.js,这样命名是想让webpack在编译的时候自动识别es6的语法,现在貌似不需要这样命名了,之前用webpack1.x的时候貌似是需要的 let path ...

  9. 局部安装webpack时,使用webpack命令时提示webpack不是内部命令解决方法

    现在js发展太快了,根本看不懂啊.于是乎想做做功课,于是乎看到了这些“奇怪”的写法,原来好多都是遵循了 ECMASCRIPT6,好吧,在本地看看怎么用的吧.写在本地的环境下, 发现各种报错,根本不能用 ...

随机推荐

  1. 【技术贴】破解Myeclipse10.7

    程序用的是http://www.cr173.com/soft/58306.html这个破解程序,是英文版的中文版.使用起来非常爽,看下面 使用期间关掉Myeclipse 期间的第三步,点击激活,此时会 ...

  2. 配置Tomcat JNDI数据源

    原文地址:http://my.oschina.net/xiaomaoandhong/blog/74584 先记录在此,按照博文未配置成功

  3. block的是发送信号的线程,又不是处理槽函数的线程

    请问UI线程给子线程发信号,应该用哪种连接方式? 如果子线程正在执行一个函数,我发射信号去执行子线程的另一个函数,那么此时子线程到底会执行什么呢? 用信号量做的同步.第一把信号槽的事件丢到线程的事件队 ...

  4. elevation 和 translationZ的区别

    Z轴阴影: Z = elevation + translationZ elevation 是静态值,是View在Z轴上的初始值 translationZ是动态值,是Z上的偏移变化 参考 http:// ...

  5. 深入浅出 - Android系统移植与平台开发(十)- Android编译系统与定制Android平台系统(瘋耔修改篇二)

    第四章.Android编译系统与定制Android平台系统 4.1Android编译系统 Android的源码由几十万个文件构成,这些文件之间有的相互依赖,有的又相互独立,它们按功能或类型又被放到不同 ...

  6. 【HDOJ】3466 Proud Merchants

    先排序预处理,后01背包. #include <stdio.h> #include <string.h> #include <stdlib.h> #define M ...

  7. git stash的使用

    https://git-scm.com/docs/git-stash 在git svn的时候使用,提交记录的时候,有部分文件的修改不需要commit. 在向svn进行git svn dcommit的时 ...

  8. 利用if else判断几点是什么时间段

    static void Main(string[] args)        {            while (true)            {                int a;  ...

  9. bzoj1237

    假如不存在相等的两个数不能配对,那很容易贪心得到,A中rank 1匹配B中rank 1 A中rank2 匹配B中rank 2…… 有了相等不能匹配这个条件,那么A中rank i可能和rank i,i- ...

  10. HDU 5950 Recursive sequence 【递推+矩阵快速幂】 (2016ACM/ICPC亚洲区沈阳站)

    Recursive sequence Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Other ...