It is very important to learn webpack as we may want to change the default behavior of webpack or fix issue if needed. Sooner or later we have to learn it.

First we have to create a folder named “First Webpack” or anything else ,then on that folder open up the git bash

Run: npm init -y

 

It wil create a package.json file

{
  "name": "first-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

 

Now we will install webpack, webpack-cli, and the webpack-dev-server using below command

npm i webpack webpack-cli webpack-dev-server --save-dev

 

Now in package.json file we will have to add developer mode for webpack

"scripts": {
  "dev": "webpack --mode development"
}

 

Now if we run npm run dev we will get below error

Module not found: Error: 

Can't resolve './src' in 'D:\Navid Anjum\Webpack\First Webpack' 

resolve './src' in 'D:\Navid Anjum\Webpack\First Webpack'

 

It is actually looking for src/index.js file .So we have to create one. So after creating one we will run the command again

npm run dev

 

This time below message will show

webpack 5.68.0 compiled successfully

 

Webpack Configure:

We can configure webpack but we have to create a file called webpack.config.js .

Using this file we can change the the default behavior of webpack using one of below point.

  • entry point
  • output
  • loaders
  • plugins
  • code splitting

Previously we see there was an error as webpack was looking for src/index.js file .This is the default entry point. Now we will change the default entry point from webpack.config.js

Add below code to change the default starting path of webpack

const path = require("path");

module.exports = {

  entry: { index: path.resolve(__dirname, "newpath", "index.js") }

};

 

Then Run

npm run dev

 

This error will show. As you can see newpath\index.js is the new entry path. But we did not create newpath yet.

Module not found: Error: Can't resolve 'D:\Navid Anjum\Webpack\First Webpack\newpath\index.js'

 

For using html we will have to use a plugin named HtmlWebpackPlugin

npm install --save-dev html-webpack-plugin

 

Now in webpack.config.js add below code

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");

module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, "src", "index.html")
        })
    ]
};

 

This code is telling webpack to use index.html from src/index.html.

Now will have to create a file named index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
First Webpack 
</body>
</html>

 

Now we have to to install webpack-dev-server

npm i webpack-dev-server --save-dev

 

After that we have to configure webpack-dev-server for dev or production mode on package.json

"scripts": {
  "dev": "webpack --mode development",
  "start": "webpack serve --open 'Firefox'"
},

 

Then

npm start

 

It will strart the browser with index.html.But in browser we can see this message

Compiled with problems:X
WARNING

configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

 

So we have to add development mode in pacage.json 

const HtmlWebpackPlugin = require(“html-webpack-plugin”);

const path = require("path");

module.exports = {

    plugins: [

        new HtmlWebpackPlugin({

            template: path.resolve(__dirname, "src", "index.html")

        })    ],    mode: 'development'

};

Download the project from Github

By Navid Anjum

Full-stack web developer and founder of Laravelaura. He makes his tutorials as simple as humanly possible and focuses on getting the students to the point where they can build projects independently. https://github.com/NavidAnjum

Leave a Reply

Your email address will not be published. Required fields are marked *