> For the complete documentation index, see [llms.txt](https://javascriptuse.gitbook.io/advanced/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/advanced/webpack-tu-a-den-a-webpack-source-map-ok.md).

# Webpack từ A đến Á: Webpack source map (ok)

## Webpack từ A đến Á: Webpack source map

 [August 01, 2020](https://kentrung256.blogspot.com/2020/07/webpack-source-map.html)  [webpack](https://kentrung256.blogspot.com/search/label/webpack?\&max-results=20)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 `a.js` `b.js` và `c.js` 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`

**Nội dung chính**

* 1\. Chuẩn bị file
* 2\. Chế độ inline source map
* 3\. Chế độ mode development

### 1. Chuẩn bị file

Cấu hình file `webpack.config.js` như sau:

```

const path = require('path')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
}
```

File nguồn `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 `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 `index.js` 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** sẽ 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ì ở `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. Hẹn gặp lại các bạn ở bài viết tiếp theo!


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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/advanced/webpack-tu-a-den-a-webpack-source-map-ok.md?ask=<question>
```

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.