webpack.config.js — Explained

A lot of people have confusions using webpack configuration file. They usualy copy it from some sources and will end up having configuration errors or will not work as expected. Webpack configuration file is a bit confusing at first but when you understand what all those lines do it will be easier to change it as per your requirement.
A webpack configuration file can be divided into four parts.
- Entry
- Loaders
- Plugins
- Output
Entry
Entry is the place where webpack starts. Most commonly this will be your index.js file. Webpack will start processing from your index.js file and then processes all those files included in your index.js file.
webpack will only process the files imported in your index and the files they have imported. Any files not used in index.js file is neglected.
entry: './src/index.js'Loaders
Now webpack will process index.js and the files specified in the index.js. Wepack have a lot of loaders for processing and will now search for the respective loader for a file. These loaders are specified in the rules array. If it is a css file it will look for css-loader, if it is an image file it will look for file-loader. Similarly there are a lot of loaders available in webpack documentation. Select the suitable loader required for your file.
Each object of the rules have a test key and use key. test key specifies the extensions of the files for a loader to be used and the loader is specified as use key. use can have multiple keys. Look at the case of css files here css-loader is used to generate css from the files included and style-loader is used to append it to the head of index.html file.
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
},
{
test: /\.css$/,
include: /node_modules/,
use: ['style-loader', 'css-loader']
}
]
}Plugins
After processing files using loaders webpack will now look if there are any plugins. There are a lot of plugins in webpack having different functions. One of them is UglifyJsPlugin. This plugin uglifies your bundle js file. ie, It will remove all those comments and changes all the variable names and also minify them. That is why when you inspect scripts in some websites you will see this ugly javascript file and will wonder how they read this. That is done by UglifyJsPlugin. There are a lot of similar plugins having different functions and find the one suitable for your needs.
new MiniCssExtractPlugin({ filename: 'app.css' })Here we are using MiniCssExtractPlugin to extract the css generated by webpack loaders and save it to app.css file
Output
This is the last process of webpack it saves the output file after processing thorough loaders and plugins and will be saved in the filename and path specified. It usually contains a path key which specifies the path to which webpack generated css and js files to be saved. filename key specifies to filename of the final javascript output file.
output: {
path: `${__dirname}/dist`,
publicPath: '/',
filename: 'bundle.js'
}These are a lot of other keys in webpack. You can find it in webpack documentation. If I need to explain more terms feel free to ask for it in comments.
