The Why and How of Using Webpack for React Development

Do you write using the React JavaScript library? Then you should definitely give Webpack a try, if you haven’t already.

Here’s how I describe Webpack in one sentence: It is a code bundler that takes modules with dependencies and bundles them into web-readable static assets (HTML, CSS, JS).

Webpack is not the only bundler you could use (there is Browserify), but it has quickly become the bundler of choice for many React developers, and it is featured in more than a few React best practices blog posts and tutorials. Webpack also packs some other magic under the hood, which makes it a great tool for building larger full-stack apps.

This article explains the benefits of using Webpack for React development and how to get started.

How does this work?

There are plenty of great resources on how Webpack works, including an awesome updated site containing easy-to-read documentation. These new docs are a part of the latest update to Webpack 2, which has further refined this fairly minimalist tool. Webpack works through a file that you include in your root project folder. Typically, it’s called “webpack.config.js” (and if you plan to go into production, you can also create a “webpack.prod.config.js” file, which would specify a configuration for production). As you will read here and in the docs, it is a nicely customizable tool.

In this file is what amounts to a configuration object that you export which acts as a graph for your dependencies. This “graph” contains entry points to start the bundling process, output points to direct the path of your bundled code, loaders that handle file-to-module transformation (more on that below), and plugins for handling actions on “chunks” of your code (which is very useful for code splitting).

Webpack uses these properties to bundle all your code in optimal, browser-ready code. One thing to keep in mind as you keep reading: Webpack only understands JavaScript, so although it can bundle .css, .scss, .html and .jpg files, it treats these files like modules so that it can transform them to be included in the graph and then bundled.

About loaders and plugins

Loaders and plugins are core concepts to Webpack, specifically to bundling and splitting modules, and simplifying the creation of files to serve bundles. If you are coding in React with Node.js as your backend, understanding these concepts will save you a lot of headaches in both your development and production environments.

Loaders are essential to utilizing Webpack with babel to transform your code (including React, JSX) into the desired JavaScript for the browser. Loaders are included in your config object as a property.

Here is a code example of a loader:

const path= require(‘path’) 
 
const config = { 
	entry: 	‘./path/to/my/entry/file.js’, 
	output:  { 
		path: path.resolve(_dirname, 	‘dist’), 
		filename: ‘my-first-webpack.bundle.js ‘ 
}, 
Module:  { 
      rules: [ 
	{ test: /\. (js|jsx)$/, use:  ‘babel-loader’} 
       ] 
  } 
}; 
 
Module. Exports = config; 

As you can see above, the properties for the loader are under the property module. And rules is an array of questions that Webpack will answer. Test is asking Webpack to use babel-loader when coming across any code that resolves to a .js or .jsx file to transform it before bundling.

Plugins, as I wrote earlier, are intended to handle actions on chunks or compilations of bundled modules (where loaders handle actions on a per-file basis). Plugins are powerful since they allow you to customize the build process. Don’t get confused on where to include your plugins, especially if you customize them. If you customize a plugin, that configuration would go in a separate file that you would then export into the “webpack.config.js” file. Here is documentation about customizing your plugins.

Super-powered plugins can also be utilized multiple times in your config object for different uses. To instantiate a new plugin, just call it with the “new” keyword. Plugins are an extremely powerful core concept of Webpack that you should take the time to learn.

Some useful plugins are:

1. HTMLWebpackPlugin
2. DllPlugin
3. DefinePlugin
4. CompressionWebpackPlugin
5. CommonChunksPlugin
6. NoEmitOnErrorsPlugin

In this short space, we’ve covered some concepts about Webpack and its powers.

Understanding Webpack (in my opinion) is going to make your web apps a lot easier to optimize for web performance. This is especially true if you have joined the React train (many top React developers have contributed to Webpack), and if you want to be able to control your bundling (as opposed to create-react-app). Webpack also levels the playing field in deployment of apps, especially if you want to create a capstone project, pet project, or other open source project.

Resources:
Webpack.js.org
Rising Stack Blog – React Best Practices