Webpack from A to Asia: Webpack import jQuery – Bootstrap

Tram Ho

Webpack from A to Asia with kentrung

Today’s post will continue to learn how to load more libraries and the example here is bootstrap version 4x.

1. Prepare the file

Code file original webpack.config.js :

Code file dist/index.html

This html page I intend to create the Carousel of bootstrap, because I have not learned how to load css into the webpack, so 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 and the next slide automatically time is 1 second. I set a short time to test it quickly. Running webpack test we have the following interface and log:

Webpack from A to Asia with kentrung

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 haven’t loaded the Boostrap Javascript yet, the carousel function is of boostrap, not jQuery, so it doesn’t understand correctly.

3. Load Bootstrap

Load boostrap via npm

When installing it, there is a warning in the cmd screen that we need to pay attention to

It means that bootstrap guy needs to install popper.js version from 1.16.0 and above but not yet installed, you have to manually install (handjob), then install more for the full set.

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

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

So the import statement above just stands for:

npm run dev webpack npm run dev and the carousel has run successfully. TASTY!

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