Easy Install webpack and webpack-cli
By Sumon Ahmed post at Mar 02, 2020
By Sumon Ahmed post at Mar 02, 2020
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.
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.
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
console.log('This is index JS')