[Webpack 2] Hashing with Webpack for long term caching
2016-06-22 21:45
549 查看
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:
Webpack.config.js
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
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] Polyfill Promises for Webpack 2
- [Webpack 2] Tree shaking with Webpack 2
- [Webpack 2] Validate your Webpack config with webpack-validator
- (二)webpack入门——webpack的使用
- (一)webpack入门——webpack的安装
- Grunt、gulp、webpack、不要听着高大上你就上,试试Codekit?
- webpack
- [Webpack 2] Intro to the Production Webpack Course
- [转]webpack 使用优化指南
- webpack 多entry 配置
- webpack打包压缩工具的使用方法
- webpack es6支持配置
- webPack 使用方便快捷
- webpack loader 列表
- webpack进阶构建项目(一)
- 实用的webpack 配置文件
- webpack学习笔记一(入门)
- 【webpack】使用webpack进行ES6开发
- Webpack傻瓜式指南(未完待续)
- Mac下webpack安装