Today’s article I will guide you how to load jQuery into webpack in module load style. If in the old days we had to load jQuery into the web page this way
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> |
Now with webpack, we don’t do that because it doesn’t suit the trend ^^. Let’s find out how to do it!
1. Prepare the file
Code file original webpack.config.js
:
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
as follows:
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 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> |
We have two files src/a.js
and src/b.js
Code two js files as follows:
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> |
The jQuery code above works to find the h1
tag and add a little css in it is also quite simple.
Have not fixed the error, but keep running webpack to see how the results are npm run dev
Open the file dist/index.html
and see the h1 tag without adding css, open the log to see the error
1 2 | Uncaught ReferenceError: $ is not defined at (a.js:1) |
2. Load jQuery for each file
First I have to install jQuery via npm
1 2 | npm install jquery |
In this case, we only need the src/a.js
file to load jQuery and the other does not. We just need to add jQuery to the correct 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> |
Rerun webpack and we have the following log:
1 2 | Uncaught ReferenceError: $ is not defined at (b.js:1) |
So in the src/a.js
file, I ran the delicious jQuery code but the src/b.js
file did not. Still the way above, the file needs to call jQuery is finished.
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> |
Rerun webpack and as a result no more errors, css was added successfully.
3. Webpack Provide Plugin
With the way on any file need to call jQuery in, quite a lot of writing. We have a second way to provide a webpack plugin to dynamically load jQuery, we just need to point both variables that it displays to the respective button module:
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> |
Now the two js files keep jQuery code rumbling without having to import anything
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> |
Now run webpack again: npm run dev
and as a result, css has been added correctly as desired. That’s it, we no longer have to manually load jQuery as before, we all have webpack to take care of you just code ^^!
This article is over, hopefully with this article you have added a lot of useful knowledge. See you in the next article!
- More information at: https://webpack.js.org/plugins/provide-plugin/#usage-jquery
- Sourcode github: https://github.com/kentrung/webpack-tutorial