Trong bài hướng dẫn này chúng ta sẽ tìm hiểu cách thiết lập Webpack để sử dụng hình ảnh trong ứng dụng của bạn thông qua url-loader, nó giúp chúng ta mã hóa hình ảnh thành chuỗi base64 URIs, cùng tìm hiểu xem cách load hình ảnh vào Javascript như thế nào.
1. Chuẩn bị file
Code file dist/index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 | <span class="token doctype"><!DOCTYPE html></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Webpack từ A đến Á cùng kentrung<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>root<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>main.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script" /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> |
Trong folder src ta để ảnh muốn import bên trong folder assets (tài nguyên) như cấu trúc bên dưới
1 2 3 4 5 6 7 8 | webpack-demo ... |- src/ | |- assets/ | |- images/ | |- img_webpack.png |- index.js |
2. Webpack url-loader
url-loader giúp chúng ta mã hóa các file thành chuỗi base64. url-loader hoạt động giống với file-loader nhưng có thể trả về DataURL nếu tệp nhỏ hơn giới hạn byte. Để sử dụng chúng ta phải cài đặt nó thông qua npm
1 2 | npm install url-loader --save-dev |
Sau khi cài đặt xong chúng ta chỉnh sửa lại cấu hình file webpack.config.js. Các tài nguyên hình ảnh có đuôi là png | jpg | gif sẽ được load thông qua url-loader.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <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">'[name].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> module<span class="token operator">:</span> <span class="token punctuation">{</span> rules<span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> test<span class="token operator">:</span> <span class="token regex">/.(png|jpg|gif)$/i</span><span class="token punctuation">,</span> use<span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> loader<span class="token operator">:</span> <span class="token string">'url-loader'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span> |
Code file src/index.js
1 2 3 4 5 6 7 8 9 10 11 | <span class="token keyword">import</span> imgWebpack <span class="token keyword">from</span> <span class="token string">'./assets/images/img_webpack.png'</span> <span class="token keyword">function</span> <span class="token function">createImgElement</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> imgElement <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">)</span> imgElement<span class="token punctuation">.</span>src <span class="token operator">=</span> imgWebpack imgElement<span class="token punctuation">.</span>alt <span class="token operator">=</span> <span class="token string">'webpack từ A đến Á cùng kentrung'</span> <span class="token keyword">return</span> imgElement <span class="token punctuation">}</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'root'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span><span class="token function">createImgElement</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> |
Ý nghĩa đoạn code trên là tạo ra một thẻ img có src là đường dẫn bức ảnh ở phần import, alt là mô tả bức ảnh. Sau khi tạo xong thì chèn ảnh này vào trong thẻ HTML có id là root.
Thế là xong phần cấu hình giờ chúng ta chạy webpack xem thế nào: npm run dev
Bây giờ chúng ta chạy file dist/index.html và xem code trong F12
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Webpack từ A đến Á cùng kentrung<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>root<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>data:image/png;base64,iVBORw0K...uPwIMAMSj2w37VAxPAAAAAElFTkSuQmCC<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>webpack từ A đến Á cùng kentrung<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>main.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script" /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> |
Ta thấy đường dẫn bức ảnh lúc này là một chuỗi base64 rất dài và đó chính là url-loader. Nếu bạn muốn tìm hiểu base64 là gì, những điểm lợi và hại khi sử dụng nó thì có thể tham khảo link này để đọc thêm: http://blogchubang.blogspot.com/2016/09/base64-image-o-la-gi-va-can-luu-y-nhung.html
3. Option limit
Giới hạn dung lượng file, mặc định là no limit. Nếu kích thước tệp bằng hoặc lớn hơn giới hạn, wepack sử dụng file-loader (theo mặc định) và tất cả các tham số truy vấn được chuyển cho nó. Ví dụ dưới đây giới hạn dung lượng tối đa là 8KB
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span> module<span class="token operator">:</span> <span class="token punctuation">{</span> rules<span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> test<span class="token operator">:</span> <span class="token regex">/.(png|jpg|gif)$/i</span><span class="token punctuation">,</span> use<span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> loader<span class="token operator">:</span> <span class="token string">'url-loader'</span><span class="token punctuation">,</span> options<span class="token operator">:</span> <span class="token punctuation">{</span> limit<span class="token operator">:</span> <span class="token number">8192</span><span class="token punctuation">,</span> <span class="token comment">// 8*1024</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> |
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 các cấu hình khác cho url-loader: https://webpack.js.org/loaders/url-loader/
- Source code github: https://github.com/kentrung/webpack-tutorial