[Webpack 2] Hashing with Webpack for long term caching

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

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 can see the bundle file with hash name. So everytime, your change the source code, it'll update automatically

[Webpack 2] Hashing with Webpack for long term caching