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. 微软CSS面试全记录

    先是会有一轮简单的电话技术面试,聊的比较随意,什么都会问,跟职位相关的都有.然后会发一些材料说是要学习,是windows内存管理相关的东西. 完了就是一轮oral test,和技术没有任何关系,问问为 ...

  2. U盘装系统出现错误 安装失败怎么办

    在用U盘装系统的时候,有些用户犹豫第一次操作,经常会遇到一些问题.例如U盘装系统失败;U盘容量已用完;内存损坏等种种问题.因此小编整理了一些关于U盘装系统失败的常见问题解答,希望对大家有帮助! 1. ...

  3. Java中double类型的数据精确到小数点后两位

    Java中double类型的数据精确到小数点后两位 多余位四舍五入,四种方法 一: double f = 111231.5585;BigDecimal b = new BigDecimal(f); d ...

  4. Eclipse下设置github开发环境

    1.按照github上的指南配置(http://help.github.com/win-set-up-git/)基础的git环境. 2.在github上创建一个Repository. 3.在Eclip ...

  5. SPRING IN ACTION 第4版笔记-第二章-002-@ComponentScan、@Autowired的用法

    一.@ComponentScan 1. @Configuration //说明此类是配置文件 @ComponentScan //开启扫描,会扫描当前类的包及其子包 public class CDPla ...

  6. PorterDuff及Xfermode初识

    图像合成,是将两幅退昂放在一起的动作,它使得我们能够同时看到两幅图像的特征. 我们可以首先在Canvas对象上绘制一个位图对象,然后再相同的Canvas对象上绘制第二个位图对象的方式来实现合成.不过这 ...

  7. Google 发布 Android 性能优化典范

    2015年伊始,Google发布了关于Android性能优化典范的专题, 一共16个短视频,每个3-5分钟,帮助开发者创建更快更优秀的Android App.课程专题不仅仅介绍了Android系统中有 ...

  8. C#获取文件的当前路径

    C#获取文件的当前路径 1. System.Diagnostics.Process.GetCurrentProcess().MainModule.FileName -获取模块的完整路径. 2.Syst ...

  9. (转载)C++创建对象的两种方法

    (转载)http://blog.sina.com.cn/s/blog_586b6c050100dhjg.html 在C++里,有两种方法创建对象: 方法一: ClassName object(para ...

  10. 获得WCF Client端的本地端口 z

    当WCF调用远程服务时,显示该调用的网速或流量.其中比较关键的一步就是需要获得WCF  Client端的本地端口,原来以为是个简单的事情,结果查了1个多小时谷歌,硬是没找到好的法子,只有自己动手了. ...