webpack.config.js — Explained

Shamin Meerankutty
Sep 1, 2018 · 3 min read

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
Sample webpack.config.js

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.

Shamin Meerankutty

Written by

Full Stack Engineer at FullContact

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade