Easy Install webpack and webpack-cli

By Sumon Ahmed post at Mar 02, 2020

81 0

#Basic Requirements

1. Download node js and install. I use version v12.14.1
2. If already install check your version, node --version
3. Npm auto install with nodejs just check the version, npm –v

Nodejs download link: https://nodejs.org/en/download

After the complete above installation just follow the instructions:

1. Let’s create a folder called webpack-starter

mkdir webpack-starter
cd webpack-starter

2. Now initialize npm

npm init

3. After successful run you can see a package.json file in your webpack-starter root folder.
4. Now we will download webpack and webpack-cli from npm repository to run it. For this run

npm install webpack webpack-cli –D

5. It will add these two dependencies in package.json file
6. Now we will create a srcdirectory and index.js file inside it.

mkdir src

7. Let’s modify npmscript in package.json

"scripts": {"dev": "webpack"}

8. Now run following command form your root folder

npm run dev

9. You will see a dist folder created with main.js file in your root folder.
10. But there is a warning in console.

WARNING in configuration
the 'mode' option has not been set, webpack will fall back 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/concepts/mode

11. This warning is coming because we need to set a mode. Let’s do that and hit npm run dev

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

12. Now you can see that there is no warning and chunk is generated.

But wait!!! How is webpack doing it? I have not configured anything.

Remember in the beginning I told you that Webpack 4 is zero configuration. Actually it is comes with default configuration which search for index.js file inside src folder and assumes that it is the entry point for building dependency graph. It also assumes that output folder is dist and emits converted files there.

Setting up config file from scratch

We will now look into how to write our own configurations so that we can have greater control on what webpack should do.

1. Let’s create webpack.config.js file in root directory. I have also created src/app/ directory and src/index.html .

2. Now open webpack.config.js and put following code for entry and output.

const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
};

3. Delete the dist folder from root and hit npm run dev command. You will find same result.

Working with HTML

You have noticed one thing that when we ran npm run dev it is only putting main.js file into dist folder. Wepack is not copying our index.html file. For that we need to use a plugin html-webpack-plugin.

1. Install html-webpack-plugin

npm i html-webpack-plugin –D

2. Now plugins section in you webpack.config.js file inside module.exports (Do not delete entry and output :

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
   ....
plugins: [
        new HtmlWebpackPlugin({
            title: 'Webpack 4 Starter',
            template: './src/index.html',
            inject: true,
            minify: {
                removeComments: true,
                collapseWhitespace: false
            }
        })
    ]
}

3. Change index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title> <%= htmlWebpackPlugin.options.title %> </title>
    <meta name="viewport" content="width=device-width,initial- scale=1"> 
</head>
<body>
<h3>Welcome to Webpack 4 starter </h3>
</html>

4. We are using htmlWebpackPlugin.options.title for adding title, which we have declared in our config file. Also put a log in your index.js file