Webpack from A to Asia: Webpack output hash digest

Tram Ho

Webpack from A to Asia with kentrung

Today we will learn about output hash digest . If in the previous article we have output a dist/main.js file, when adding the hash output value it will build out like dist/main.f24fea.js and the code inside is still the same. Its main effect is to avoid browser cache js file, when we have to change the code, the following output file will be different from the previous file.

1. Prepare the file

The original webpack.config.js file code

Create file src/index.js

2. Add output hash in webpack config

Open the webpack.config.js file and add the hash value to the output> filename like this

When running the npm run dev command npm run dev we will see the built js file looks like this dist/main.f24fea8f2c0f0b10bbce.js and note that the code inside is no different without a hash.

3. The length of the hash string

By default, when adding the hash, the string length will be 20 characters if you see it long, you can change it by adding numbers behind. In the example below, I only created a hash string of 6 characters long

The output file will look like this dist/main.f24fea.js

You note that after using the hash , the output file will be different, this affects the dist/index.html file we wrote earlier just called main.js This problem has not been solved right away, it must be added manually, today’s article is mainly about output hash for you to know.

This article is over, hope with this article you have added a lot of useful knowledge. See you in the next article.

Share the news now

Source : Viblo