Basic Webpack 5 Project with CSS: Step-by-Step

In this guide, we'll walk through setting up a basic Webpack 5 project with added support for CSS. This will allow you to bundle both JavaScript and CSS into your project efficiently.

Step 1: Set Up Your Project Directory

Start by creating a new project directory and initializing a package.json file.

mkdir my-webpack-project

cd my-webpack-project

npm init -y

Step 2: Install Webpack, Webpack CLI, and CSS Loader Packages

To use Webpack, you need to install both Webpack and the Webpack CLI. Additionally, we will need css-loader and style-loader to handle CSS files.

Run the following command to install the necessary dependencies:

npm install webpack webpack-cli css-loader style-loader --save-dev

Step 3: Create the Project Structure

Create the following file structure for your project:

1 my-webpack-project/
2 ├── src/
3 │   ├── index.js
4 │   └── styles.css
5 ├── dist/
6 ├── package.json
7 └── webpack.config.js

src/index.js: This is where your JavaScript code goes.
src/styles.css: This file will contain your CSS styles.
dist/: This directory will hold the bundled output.
webpack.config.js: The Webpack configuration file.

Step 4: Write Some JavaScript and CSS

Open src/index.js and add a simple JavaScript function:

1 import "./styles.css";
2 
3 // Import the CSS file
4 
5 console.log("Hello, Webpack 5 with CSS!");

Next, add some CSS styles to src/styles.css:

css

1 body {
2   background-color: #f0f0f0;
3   font-family: Arial, sans-serif;
4   color: #333;
5 }
6 
7 h1 {
8   color: #007bff;
9 }

Step 5: Configure Webpack for JavaScript and CSS

In the root of your project, create the webpack.config.js file and configure it to handle both JavaScript and CSS files:

1 const path = require("path");
2 
3 module.exports = {
4   entry: "./src/index.js", // Entry point for the application
5   output: {
6     filename: "bundle.js", // Output file name
7     path: path.resolve(__dirname, "dist"), // Output directory
8   },
9   module: {
10     rules: [
11       {
12         test: /\.css$/, // Match CSS files
13         use: ["style-loader", "css-loader"], // Use both loaders to handle CSS
14       },
15     ],
16   },
17   mode: "development", // Set mode to development or production
18 };

css-loader: This interprets @import and url() in CSS and resolves them.
style-loader: This injects CSS into the DOM.

Step 6: Add Scripts to package.json

In the "scripts" section of your package.json, add the following command to make it easier to build your project:

json

1 "scripts": {
2   "build": "webpack"
3 }

Now, you can bundle your project using:

npm run build

Step 7: Bundle Your Project

Run the following command to bundle your JavaScript and CSS:

npm run build

Webpack will create a bundled dist/bundle.js file, which includes both the JavaScript and the CSS.

Step 8: Test the Output

Create an index.html file inside the dist/ directory to test the output:

html

1 <!DOCTYPE html>
2 <html lang="en">
3   <head>
4     <meta charset="UTF-8" />
5     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6     <title>Webpack 5 Setup with CSS</title>
7   </head>
8   <body>
9     <h1>Welcome to Webpack 5 with CSS!</h1>
10     <script src="bundle.js"></script>
11   </body>
12 </html>

Open the dist/index.html file in your browser. You should see a styled page with the heading "Welcome to Webpack 5 with CSS!" and a background color, confirming that both JavaScript and CSS are bundled correctly.

Conclusion

You’ve now set up a basic Webpack 5 project with CSS support. Webpack handles both JavaScript and CSS files, bundling them into a single output file. From here, you can expand your configuration to support more features like image loading, SCSS, or TypeScript.