Before starting this article I assumed that you have installed the latest version node.js, yarn/npm and visual studio code. If not download node.js from here, yarn from here, and visual studio code from here.
Creating project infrastructure
Webpack is fully configurable and the developer gets more than enough freedom to set up their app infrastructure. From my experience, I have created a standard structure so that, it can be more manageable and better lookings. So, Let’s create a folder for the project and name it webpack-demo. Create a project structure like this image.
Open command prompt or PowerShell or any command-line tool you prefer and navigate to the project folder. write yarn init (for npm use npm instead of yarn) command and press enter. It will create a package.json file in the root directory. package.json will contain all of the used libraries and plugins references alongside build commands and other info about project structure.
/* Use the variables */
import custom.scss file into main.js
To compile CSS code we will use a plugin. MiniCssExtractPlugin is the mostly use plugin to compile CSS. Run yarn add mini-css-extract-plugin--save-dev to download it. Add two extra loaders to handle CSS code if MiniCssExtractPlugin fails. Use yarn add css-loader sass-loader --save-dev to download. Add a rules for stylesheets in config file.
To configure bootstrap install bootstrap use yarn add bootstrap --save-dev command. Bootstrap has a dependency on Popper.js and jQuery. But Popper.js is now declared as deprecated and they recommend popperjs/core. And I also love to use the updated jQuery version. So, let install popperjs/core and jQuery (yarn add popperjs/core jquery --save-dev).
Update styles.scss file using the following lines.
Add some div with bootstrap class in index.html file.
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing
responsive, mobile-first projects on the web.</p>
Now run yarn serve to see updates.
To Handling files in webpack we need a loader. In this demo, I use file-loader. Install it using yarn add file-loader --save-dev command.
Add new rules to handle files in webpack.config.js.