All before we know how to load jQuery in webpack. Today’s article will continue to learn how to load more libraries and the example here is Materialize version 1.0.0.
1. Prepare the file
Code file original webpack.config.js :
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> |
Code file dist/index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <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> 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> link</span> <span class="token attr-name">rel</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> stylesheet <span class="token punctuation">"</span></span> <span class="token attr-name">href</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css <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> 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">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> container <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 attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> carousel <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> a</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> carousel-item <span class="token punctuation">"</span></span> <span class="token attr-name">href</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> #one! <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> https://lorempixel.com/250/250/nature/1 <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> a</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> a</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> carousel-item <span class="token punctuation">"</span></span> <span class="token attr-name">href</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> #two! <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> https://lorempixel.com/250/250/nature/2 <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> a</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> a</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> carousel-item <span class="token punctuation">"</span></span> <span class="token attr-name">href</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> #three! <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> https://lorempixel.com/250/250/nature/3 <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> a</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> a</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> carousel-item <span class="token punctuation">"</span></span> <span class="token attr-name">href</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> #four! <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> https://lorempixel.com/250/250/nature/4 <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> a</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> a</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> carousel-item <span class="token punctuation">"</span></span> <span class="token attr-name">href</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> #five! <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> https://lorempixel.com/250/250/nature/5 <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> a</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> 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 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> |
This html page I intend to create a Carousel of Materialize, because I have not learned how to load css into webpack, I temporarily load the css into the html here.
1 2 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> link</span> <span class="token attr-name">rel</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> stylesheet <span class="token punctuation">"</span></span> <span class="token attr-name">href</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> |
Code file src/index.js
1 2 3 4 | <span class="token function">$</span> <span class="token punctuation">(</span> document <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">ready</span> <span class="token punctuation">(</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">$</span> <span class="token punctuation">(</span> <span class="token string">'.carousel'</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">carousel</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> |
The above code has the effect of automatically running the carousel. Test run webpack we have a pure white interface and log as follows:
1 2 | Uncaught ReferenceError: $ is not defined at (main.js:1) |
2. Load jQuery
The previous post already showed how to load jQuery, but quit this tutorial from the beginning for easy follow-up. First I have to install jQuery via npm
1 2 | npm install jquery |
After loading jQuery, next we modify webpack.config.js to load jQuery through provide webpack plugin
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <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> 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> 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> |
So we have solved the jQuery load problem to understand the $ characters in the src/index.js code. Run webpack and we have error log like this:
1 2 | Uncaught TypeError: e(...).carousel is not a function at (main.js:1) |
This is because we have not loaded the Materialize Javascript, the carousel function is of Materialize, not of jQuery, so it does not understand correctly.
3. Load Materialize
Load Materialize via npm
1 2 | npm install <a class="__cf_email__" href="/cdn-cgi/l/email-protection">[email protected]</a> |
The next step is to load the Materialize Javascript into the src/index.js
1 2 3 4 5 6 | <span class="token keyword">import</span> <span class="token string">'materialize-css'</span> <span class="token function">$</span> <span class="token punctuation">(</span> document <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">ready</span> <span class="token punctuation">(</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">$</span> <span class="token punctuation">(</span> <span class="token string">'.carousel'</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">carousel</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> |
The other import statement will automatically look in node-modules and then materialize-css. In this module the package.json file has a declaration
1 2 | "main": "dist/js/materialize.js" |
So the import statement above just stands for:
1 2 | <span class="token keyword">import</span> <span class="token string">'materialize-css/dist/js/materialize.js'</span> |
Rerun webpack npm run dev and as a result … still can’t run, still the same error
1 2 | Uncaught TypeError: e(...).carousel is not a function at (main.js:1) |
It took a lot of time to search the internet, how many neurons did it take to think about why. Finally, I found a way to fix the error, but I still do not know why, the pro can comment to explain for me. We modify the webpack.config.js file and add values for the jQuery keys
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <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> 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> 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 string">'window.$'</span> <span class="token operator">:</span> <span class="token string">'jquery'</span> <span class="token punctuation">,</span> <span class="token string">'window.jQuery'</span> <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> |
npm run dev webpack npm run dev and the result is DELICIOUS!
This article is over, hopefully with this article you have added a lot of useful knowledge. See you in the next article!
- Refer to how to install Materialize at: https://materializecss.com/
- Source code github: https://github.com/kentrung/webpack-tutorial