[React] How to configure Webpack
While implementing a React app for this chat application, I ran into some problems setting up a proxy to call APIs provided by the backend. Most of the times adding a
package.json did the job for me. If this didn’t work out for me for some reason, then I used
http-proxy-middleware to configure my proxy. This was the furthest I could go because I did not want to look into the complex configuration of
webpack or other alternatives. I always wanted to focus more on the implementation. However, this time with that chat application, I came across a situation where
proxy worked out for me. This motivated me to learn how to configure
Webpack Core Concepts
- The entry object is where webpack looks to start bundling. Webpack will build internal dependency graph to figure out which other modules and libraries that entry point depends on.
- Default value:
- Consideration: One entry point for SPA, multiple for MPA (one entry point per HTML page).
- In this example, we can use the default value since
index.jsrenders the React App to the root div.
outputobject defines where webpack should output bundles and assets.
- Default value:
- In this example, I will set the
dist/app.[contenthash].js. I added a unique hash for caching. This will help loading the site faster. For picking up the new code after a new deployment, let’s see how
pluginscan help with caching.
moduleobject can be used to define
loadersto process other types of files (css, jsx, tsx, etc)
- An array of rules can be set in
module.rulesto modify how the module is created. Each rule can basically test the conditions and use the specified loader.
- Loaders work with the individual files during or before bundling.
- In this example, I will define 2 rules. First of all, I need webpack to handle the css files for styling. Secondly, I need webpack to transpile js and jsx files. Let’s look at the sample code after looking into
- Plugins are additional customizations to perform on the resulting bundle.
- Plugins work at bundles or chunks at the end of bundle generation process.
- In this example, I will use
HtmlWebpackPluginto help generating HTML files for the webpack bundles. I mentioned caching earlier during the
outputsection. Using this plugin is very helpful because webpack will include the unique hash that was generated earlier into
index.html. This will ensure new code to be picked up.
- Additionally, I will use two other plugins. We will dive into the sample code after explaining some dependencies.
modeconfiguration tells webpack to use its built-in optimizations according to the assigned value.
- Default value is
productionand possible options are
- In this example, I will set the
modeon the fly in
buildcommands. This could be useful when defining the API URL for different environment.
Before diving into the full
webpack.config.js, let us look at some required dependencies.
First of all, we need these two dependencies to run
npm run start and
npm run build commands defined in package.json. Notice how
mode is set in the command.
$ npm install --save-dev webpack-cli webpack-dev-server
webpack CLI provides set of commands to run on terminal.
webpack-dev-server provides a development server. It creates the bundle in memory and serves with
express. Express server creates a websocket connection between the bundle and the running port. Therefore when the entry point changes as development goes on, new code will be picked up and the browser refreshes automatically. It can be launched with
webpack serve command.
$ npm install --save-dev clean-webpack-plugin html-webpack-plugin webpack-manifest-plugin
clean-webpack-plugin removes all files under
output.path and all unused assets after every successful rebuild.
html-webpack-plugin simplifies creation of HTML to serve the resulting webpack bundles.
Let us see how these plugins can be used in
There are so many more plugins that can be used with webpack. I just listed a few that I think might be useful in any project.
$ npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader
@babel/core provides the Babel compiler core.
Babel provides presets that acts as a sharable set of Babel plugins. Basically, applying plugins enable Babel’s code transformation. We are going to use two presets:
@babel/preset-env for compiling ES6 syntax and
@babel/preset-react for React.
To use the two Babel Presets mentioned above, we need to add
babel-loader to the list of webpack modules.
These babel presets and plugin can be defined under
Setting up DevServer
We covered a lot of background and core concepts of webpack thus far. Let’s go back to our original goal … how to set up a DevServer.
webpack-dev-server can be defined under
devServer. Basically, all I wanted to do here was to set up proxy and disable compression.
With this setup, HTTP requests going to
localhost:3000/api/path/to/endpoint is proxied and rewritten to
Here are my final
npm run start, I was able to start the
webpack-dev-server to run my app locally.
npm run build generates the bundle under
dist. Just like how I configured webpack, I can verify these results.
- manifest.json is generated.
Concepts | webpack
DevServer | webpack
webpack-dev-server can be used to quickly develop an application. See the development guide to get started. This page…
Webpack — The Confusing Parts
Webpack is the leading module bundler for React and Redux apps. I think folks using Angular 2 and other frameworks are…
Webpack Dev Server
So what is webpack dev server? Webpack dev server is a web server based on express.