[Webpack 2] Hashing with Webpack for long term caching
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的更多相关文章
- [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 ...
- webpack 4.0 配置文件 webpack.config.js文件的放置位置
一般webpack.config.js是默认放在根目录的,不在根目录的时候需要在package.json中制定位置,我的配置文件目录是config/webpack.config.js,在package ...
- 前端自动化构建工具webpack (一)之webpack安装 和 设置webpack.confi.js
目的: 模块化开发,组件化开发,让代码符合开发规范,更高效 webpack作用:从pack,就知道这是包的意思,比较专业点叫做前端自动化打包构建工具,代码错误检查,预处理,文件合并(打包),代码压缩 ...
- webpack快速入门——给webpack增加babel支持
1.Babel的安装与配置 Babel其实是几个模块化的包,其核心功能位于称为babel-core的npm包中,webpack可以把其不同的包整合在一起使用,对于每一个 你需要的功能或拓展,你都需要安 ...
- 【webpack】---模块打包机webpack基础使用---【巷子】
001.什么是webpack? 作用有哪些? WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,Ty ...
- 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 ...
- Webpack学习笔记九 webpack优化总结
webpack 优化笔记 webpack4 自带的优化包括 swingTree(摇摆树)和作用域提升 swingTree 比如入口文件 index.js引入通用方法 util, 里面有 10个方法, ...
- vue 项目中 自定义 webpack 的 配置文件(webpack.config.babel.js)
webpack.config.babel.js,这样命名是想让webpack在编译的时候自动识别es6的语法,现在貌似不需要这样命名了,之前用webpack1.x的时候貌似是需要的 let path ...
- 局部安装webpack时,使用webpack命令时提示webpack不是内部命令解决方法
现在js发展太快了,根本看不懂啊.于是乎想做做功课,于是乎看到了这些“奇怪”的写法,原来好多都是遵循了 ECMASCRIPT6,好吧,在本地看看怎么用的吧.写在本地的环境下, 发现各种报错,根本不能用 ...
随机推荐
- 关于How,刷墙和亲戚
对于需求而言,最宏观的概念是六字诀: Who->Where->Which->How->End->Effect:谁(Who)在什么地方(Where),对那个对象(Which ...
- 破解EXCEL2007的密码
破解EXCEL2007的密码 xshzhao (斑竹)顶楼举报 我有一个EXCEL2007文件(后缀是XLSX),由于设置了打开密码.现在密码搞忘了,这个文件对我很重要. 我试过了Office Pas ...
- Response.Redirect:无法在发送 HTTP 标头之后进行重定向
URL:http://blog.163.com/asp_neter/blog/static/17510918820107258107558/ 错误出现语句:“Response.Redirect(&qu ...
- [原博客] BZOJ 2242 [SDOI2011] 计算器
题目链接 noip级数论模版题了吧.让求三个东西: 给定y,z,p,计算`Y^Z Mod P` 的值. 给定y,z,p,计算满足`xy≡ Z ( mod P )`的最小非负整数. 给定y,z,p,计算 ...
- ArrayList与Vector、HashMap与HashTable
摘自api: 1.ArrayList与Vector: 原文:This class(ArrayList) is roughly equivalent to Vector, except that it ...
- [wikioi]多源最短路
http://wikioi.com/problem/1077/ Floyd算法.精华是三层循环,if (dist(i,k) + dist(k,j) < dist(i,j)) then dist( ...
- Qt无边框MainWindow如何拖动四周改变大小
原来还有winEvent(), x11Event() and macEvent() 这些东西...不过貌似还需要找更好的办法,否则就无法跨平台了. 你需要重新处理部分窗体事件,以下代码适用于Windo ...
- mysql 限制并发select patch
限制并发select的patch,代码量很少,主要是为了学习mysql的源码,yy一下. 增加两个全局控制变量: thread_limit_min thread_limit_max 增加一个条件变量: ...
- 【转】c++重载、覆盖、隐藏——理不清的区别
原文网址:http://blog.sina.com.cn/s/blog_492d601f0100jqqm.html 再次把林锐博士的<高质量c++编程指南>翻出来看的时候,再一次的觉得这是 ...
- Grading
100 >= A >= 93 > A- >= 90; 90 > B+ >= 87 > B >= 83 > B- >= 80; 80 > ...