Webpack from A to Asia: Webpack import jQuery – Materialize

Tram Ho

Webpack from A to Asia with kentrung

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 :

Code file dist/index.html

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.

Code file src/index.js

The above code has the effect of automatically running the carousel. Test run webpack we have a pure white interface and log as follows:

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

After loading jQuery, next we modify webpack.config.js to load jQuery through provide webpack plugin

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:

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

The next step is to load the Materialize Javascript into the src/index.js

The other import statement will automatically look in node-modules and then materialize-css. In this module the package.json file has a declaration

So the import statement above just stands for:

Rerun webpack npm run dev and as a result … still can’t run, still the same error

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

npm run dev webpack npm run dev and the result is DELICIOUS!

Webpack from A to Asia with kentrung

This article is over, hopefully with this article you have added a lot of useful knowledge. See you in the next article!

Share the news now

Source : Viblo