How to Set Up a Basic Webpack 5 Project with CSS Support

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'; // Import the CSS file
2 
3 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.

How to Set Up a Basic Webpack 5 Project with CSS Support

Step 1: Set Up Your Project Directory

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

Step 3: Create the Project Structure

Step 4: Write Some JavaScript and CSS

Step 5: Configure Webpack for JavaScript and CSS

Step 6: Add Scripts to package.json

Step 7: Bundle Your Project

Step 8: Test the Output

Conclusion

Related Posts:

How to solve Cannot find module ajv/dist/compile/codegen

How to Solve - "Cannot find package 'mem-fs' imported from" Error

How to Create a Directory if It Does Not Exist in Node.js

How to Fix "__dirname is Not Defined" in NodeJs

How to solve [eslint] Delete `CR` [prettier/prettier] error

How to solve eslint Parsing error Cannot find module 'next/babel'