# \[WEBPACK] Webpack output hash digest (ok)
[](https://viblo.asia/)
* [Posts](https://viblo.asia/)
* [Questions](https://viblo.asia/questions)
* [Discussions](https://viblo.asia/discussion)
6[](https://ctf.viblo.asia/?utm_source=viblo\&utm_medium=top_banner\&utm_campaign=new_puzzles)[](https://viblo.asia/u/trungnt256)+2[](https://viblo.asia/u/trungnt256)[kentrung ](https://viblo.asia/u/trungnt256)@trungnt256Follow 275 7 23Published Jul 25th, 1:21 PM 2 min read295 0 0
## Webpack từ A đến Á: Webpack output hash digest
[CSS](https://viblo.asia/tags/css)[HTML](https://viblo.asia/tags/html)[JavaScript](https://viblo.asia/tags/javascript)[Webpack](https://viblo.asia/tags/webpack)
Bài hôm nay chúng ta sẽ tìm hiểu về **output hash digest**. Nếu như ở bài trước chúng ta đã output ra được một file `dist/main.js` thì khi thêm giá trị hash output nó sẽ build ra kiểu như `dist/main.f24fea.js` còn code bên trong thì vẫn vậy chẳng khác gì. Tác dụng chính của nó là tránh trình duyệt cache lại file js, khi chúng ta có thay đổi code thì file output sau sẽ khác với file output trước.
### 1. Chuẩn bị file
Code file `webpack.config.js` ban đầu
```
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
}
```
Tạo file `src/index.js`
```
console.log('Hello World!')
```
### 2. Thêm output hash trong webpack config
Mở file `webpack.config.js` và thêm giá trị hash vào chỗ output > filename như này nhé
```
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.[hash].js',
path: path.resolve(__dirname, 'dist')
}
}
```
Khi chạy lại câu lệnh `npm run dev` chúng ta sẽ thấy file js được build ra trông dạng như này `dist/main.f24fea8f2c0f0b10bbce.js` và lưu ý là code bên trong cũng không khác gì khi chưa có hash.
### 3. Độ dài của chuỗi hash
Mặc định khi thêm hash vào thì độ dài chuỗi này sẽ là **20 kí tự** nếu bạn thấy dài thì có thể thay đổi bằng cách thêm số đằng sau. Ví dụ dưới đây mình chỉ tạo chuỗi hash dài **6 kí tự**
```
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.[hash:6].js',
path: path.resolve(__dirname, 'dist')
}
}
```
File output build ra sẽ trông dạng như thế này `dist/main.f24fea.js`
> Các đồng chí lưu ý là khi dùng **hash** rồi thì file output sinh ra sẽ khác nhau, điều này làm ảnh hưởng đến file `dist/index.html` chúng ta đã viết lúc trước chỉ gọi `dist/main.js`. Vấn đề này hiện ta chưa giải quyết ngay được mà phải tự thêm bằng tay (handjob), bài hôm nay chủ yếu là giới thiệu về output hash để các bạn biết thôi nhé.
Bài viết đến đây là hết, hi vọng với bài viết này các bạn đã thêm được nhiều kiến thức bổ ích. Hẹn gặp lại các bạn ở bài viết tiếp theo.
* Tham khảo thêm về output hash digest tại đây:
* Source code github:
* Series webpack:
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://javascriptuse.gitbook.io/javascript/advanced/webpack-output-hash-digest-ok.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.