Bài viết hôm nay mình sẽ hướng dẫn các bạn cách load jQuery vào trong webpack theo phong cách load module. Nếu như ngày xưa chúng ta phải load jQuery vào trang web theo kiểu này
1 2 | <span class="token operator"><</span>script src<span class="token operator">=</span><span class="token string">"jquery.js"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> |
Giờ với webpack chúng tôi không làm như thế vì không hợp với xu thế ^^. Cùng tìm hiểu xem cách làm như nào nhé!
1. Chuẩn bị file
Code file webpack.config.js ban đầu:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <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 punctuation">{</span> main<span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">'./src/a.js'</span><span class="token punctuation">,</span> <span class="token string">'./src/b.js'</span> <span class="token punctuation">]</span> <span class="token punctuation">}</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> |
File dist/index.html như sau:
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>h1</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>h1</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 có hai file src/a.js và src/b.js. Code hai file js như sau:
1 2 | <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'h1'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">'color'</span><span class="token punctuation">,</span> <span class="token string">'white'</span><span class="token punctuation">)</span> |
1 2 | <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'h1'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">'background'</span><span class="token punctuation">,</span> <span class="token string">'purple'</span><span class="token punctuation">)</span> |
Đoạn code jQuery trên có tác dụng tìm thẻ h1 và thêm một ít css vào trong đó cũng khá đơn giản.
Chưa fix lỗi mà ta cứ chạy webpack xem kết quả thế nào npm run dev
Mở file dist/index.html thì thấy thẻ h1 không có thêm css, mở log ra xem thì báo lỗi
1 2 | Uncaught ReferenceError: $ is not defined at (a.js:1) |
2. Load jQuery theo từng file
Trước tiên mình phải cài đặt jQuery qua npm
1 2 | npm install jquery |
Ở trường hợp ta chỉ cần file src/a.js load jQuery còn file kia thì không. Ta chỉ cần thêm jQuery vào đúng file đó.
1 2 3 4 | <span class="token keyword">import</span> $ <span class="token keyword">from</span> <span class="token string">'jquery'</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'h1'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">'color'</span><span class="token punctuation">,</span> <span class="token string">'white'</span><span class="token punctuation">)</span> |
Chạy lại webpack và ta có log như sau:
1 2 | Uncaught ReferenceError: $ is not defined at (b.js:1) |
Như vậy ở file src/a.js đã chạy code jQuery ngon lành nhưng file src/b.js thì không. Vẫn theo cách trên thì file nào cần thì gọi jQuery là xong.
1 2 3 4 | <span class="token keyword">import</span> $ <span class="token keyword">from</span> <span class="token string">'jquery'</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'h1'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">'background'</span><span class="token punctuation">,</span> <span class="token string">'purple'</span><span class="token punctuation">)</span> |
Chạy lại webpack và kết quả là không còn lỗi nữa, css đã được thêm vào thành công.
3. Webpack Provide Plugin
Với cách trên file nào cần thì phải gọi jQuery vào, khá mất công viết. Ta có cách thứ hai dùng provide plugin của webpack để tự động tải jQuery, chúng ta chỉ cần trỏ cả hai biến mà nó hiển thị vào mô-đun nút tương ứng:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <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> <span class="token keyword">const</span> webpack <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'webpack'</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 punctuation">{</span> main<span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">'./src/a.js'</span><span class="token punctuation">,</span> <span class="token string">'./src/b.js'</span> <span class="token punctuation">]</span> <span class="token punctuation">}</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> plugins<span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token keyword">new</span> <span class="token class-name">webpack<span class="token punctuation">.</span>ProvidePlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span> $<span class="token operator">:</span> <span class="token string">'jquery'</span><span class="token punctuation">,</span> jQuery<span class="token operator">:</span> <span class="token string">'jquery'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span> |
Bây giờ hai file js cứ code jQuery ầm ầm mà không cần phải import gì nữa
1 2 | <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'h1'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">'color'</span><span class="token punctuation">,</span> <span class="token string">'white'</span><span class="token punctuation">)</span> |
1 2 | <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'h1'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">'background'</span><span class="token punctuation">,</span> <span class="token string">'purple'</span><span class="token punctuation">)</span> |
Giờ chạy lại webpack: npm run dev và kết quả là css đã được thêm vào đúng theo mong muốn. Vậy là xong chúng ta không còn phải load jQuery thủ công như trước nữa, tất cả đã có webpack lo các chú chỉ việc code ^^!
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 tại: https://webpack.js.org/plugins/provide-plugin/#usage-jquery
- Sourcode github: https://github.com/kentrung/webpack-tutorial