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:
1 2 3 4 5 6 7 8 9 10 | <span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'path'</span><span class="token punctuation">)</span> module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span> entry<span class="token operator">:</span> <span class="token string">'./src/index.js'</span><span class="token punctuation">,</span> output<span class="token operator">:</span> <span class="token punctuation">{</span> filename<span class="token operator">:</span> <span class="token string">'main.js'</span><span class="token punctuation">,</span> path<span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'dist'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
File nguồn src/index.js mình cố tình code lỗi như này:
1 2 3 4 5 | <span class="token keyword">function</span> <span class="token function">sum</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> a <span class="token operator">+</span> b <span class="token punctuation">}</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>kentrung<span class="token punctuation">)</span> |
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.
1 2 | 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:
1 2 | Uncaught ReferenceError<span class="token operator">:</span> kentrung is not defined at main<span class="token punctuation">.</span>js<span class="token operator">:</span><span class="token number">1</span> |
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
1 2 3 4 5 6 7 8 9 10 11 | <span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'path'</span><span class="token punctuation">)</span> module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span> entry<span class="token operator">:</span> <span class="token string">'./src/index.js'</span><span class="token punctuation">,</span> output<span class="token operator">:</span> <span class="token punctuation">{</span> filename<span class="token operator">:</span> <span class="token string">'main.js'</span><span class="token punctuation">,</span> path<span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'dist'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> devtool<span class="token operator">:</span> <span class="token string">'inline-source-map'</span> <span class="token punctuation">}</span> |
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 ^^)
1 2 | Uncaught ReferenceError<span class="token operator">:</span> kentrung is not defined at index<span class="token punctuation">.</span>js<span class="token operator">:</span><span class="token number">4</span> |
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
1 2 3 4 5 6 7 8 9 10 11 | <span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'path'</span><span class="token punctuation">)</span> module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span> mode<span class="token operator">:</span> <span class="token string">'development'</span><span class="token punctuation">,</span> entry<span class="token operator">:</span> <span class="token string">'./src/index.js'</span><span class="token punctuation">,</span> output<span class="token operator">:</span> <span class="token punctuation">{</span> filename<span class="token operator">:</span> <span class="token string">'main.js'</span><span class="token punctuation">,</span> path<span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'dist'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Khi thêm option này chúng ta cũng có kết quả tương tự như dùng inline source map
1 2 | Uncaught ReferenceError<span class="token operator">:</span> kentrung is not defined at index<span class="token punctuation">.</span>js<span class="token operator">:</span><span class="token number">4</span> |
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
1 2 3 4 | 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!
- Tham khảo thêm về chế độ development tại: https://webpack.js.org/guides/development/
- Source code github: https://github.com/kentrung/webpack-tutorial