webpackWebpack is executed multiple times during standard development. Whenever I change an SCSS file, I have to run the whole webpack process to convert SCSS to CSS and bundle all resources. Until now I have been doing it by manually running npx webpack --mode=development. There is a better way - webpack can observe the source files and do it's job automatically.

 

webpackWould you like to use Bootstrap but you do not know how to force webpack to bundle it? This part of the tutorial for webpack describes how to add any external CSS library to a project with webpack.

 

webpackYou already know how to use multiple JS files for one page. This time, I will take care of other common case - external libraries. In this part of the tutorial for webpack, I add jQuery to the package. It is probably one of the most often used frontend libraries so it is a good example.

 

webpackBundling JS files was the first task that webpack did in the tutorial. That was easy because the bundling starts from entry points which are nothing else than JS files. My case was simple - each entry point was a single JS file. Unfortunately, that is not a common scenario. It often happens that one page depends on multiple JS scripts. Can webpack handle it?

 

 

webpackAlthough we already know how to bundle CSS files, many projects use more advanced solutions like SASS with SCSS files. That is not a problem - a proper loader for webpack solves this issue.