> For the complete documentation index, see [llms.txt](https://javascriptuse.gitbook.io/javascript/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://javascriptuse.gitbook.io/javascript/advanced/webpack-output-hash-digest-ok.md).
# \[WEBPACK] Webpack output hash digest (ok)
https\://viblo.asia/p/webpack-tu-a-den-a-webpack-output-hash-digest-924lJ3xm5PM
[](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: