# \[WEBPACK] Webpack source map (ok)
## Webpack từ A đến Á: Webpack source map
[JavaScript](https://viblo.asia/tags/javascript)[Webpack](https://viblo.asia/tags/webpack)[CSS](https://viblo.asia/tags/css)[HTML](https://viblo.asia/tags/html)
Khi webpack đóng gói mã nguồn của bạn, việc theo dõi lỗi hay cảnh báo có thể trở nên khó khăn. Ví dụ: nếu bạn có ba file nguồn `src/a.js` `src/b.js` và `src/c.js` ghép thành một file `bundle.js` và một trong các file nguồn có lỗi, chỗ thông báo lỗi sẽ chỉ đến bundle.js. Điều này không phải lúc nào cũng hữu ích vì bạn có thể muốn biết chính xác lỗi đến từ đâu, dòng bao nhiêu, file nào bị lỗi. Để cuộc sống dễ thở webpack cung cấp một số option giúp chúng ta dò tìm lỗi một cách dễ dàng đó là `inline source map` hoặc `mode development`
### 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')
}
}
```
File nguồn `src/index.js` mình cố tình code lỗi như này:
```
function sum(a, b) {
return a + b
}
console.log(kentrung)
```
Easy ta thấy biến `kentrung` chưa hề được khai báo nên log ra sẽ báo lỗi. Mình cứ kệ và chạy webpack xem sao.
```
npm run dev
```
Sau khi webpack build xong ta mở file `dist/index.html` và xem log ra sao. Kết quả báo lỗi như sau:
```
Uncaught ReferenceError: kentrung is not defined at main.js:1
```
Nó thông báo lỗi kiểu này thì bạn rất khó để biết được thực sự lỗi ở file nào, dòng nào luôn. Để dễ fix lỗi thì webpack cung cấp option **inline source map** hoặc **mode development.**
### 2. Chế độ inline source map
Source map là cách thiết lập bản đồ nguồn, ánh xạ mã được biên dịch của bạn trở lại mã nguồn ban đầu. Nếu một lỗi bắt nguồn trong file `src/index.js` thì source map sẽ cho bạn biết chính xác vị trí lỗi. Thêm option này vào `webpack.config.js`
```
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
devtool: 'inline-source-map'
}
```
Khi thêm option này vào chúng ta dễ dàng biết được lỗi ở vị trí nào để mà f\*ck lỗi (ý mình là fix lỗi ^^)
```
Uncaught ReferenceError: kentrung is not defined at index.js:4
```
### 3. Chế độ mode development
Tốt nhất khi chúng ta đang trong quá trình viết code nên chọn chế độ **mode: development** để dễ dàng debug, theo dõi lỗi một cách dễ dàng. Thêm option này vào `webpack.config.js`
```
const path = require('path')
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
}
```
Khi thêm option này chúng ta cũng có kết quả tương tự như dùng **inline source map**
```
Uncaught ReferenceError: kentrung is not defined at index.js:4
```
Ngoài ra khi ta thêm option này thì ở màn hình `cmd` cũng mất luôn cảnh báo của webpack mà nó cứ nhắc mình suốt ngày
```
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
```
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!