Configure webpack

Now that you’ve installed webpack, let’s create the webpack configuration file so we can bundle our project. Depending on your application, it might make sense to split its code across multiple files or aggregate everything into a single file. webpack assembles the source files in a different set of files for deployment. This way you can always choose the most efficient deployment strategy, without changing your source code layout. In an application with multiple screens, you could place all dependencies that are used in every screen in one file, and the code for each screen in a separate file. That way the user only downloads the code for the page they visit. For simple applications like our word counter, which only has a single page, it’s sufficient to put everything into a single file. This will speed up the time it takes to download the app by reducing network requests.

A minimal webpack configuration requires one or more entry points and one output. Entry points configure the files where execution starts once the application loads in the browser. The output configures how entry points map to output file names. We will also ask webpack to transform our original source code, replacing JSX code with calls to React.createElement.

Let’s start with the entry points. Place the webpack configuration in a file named webpack.config.js in the project directory:

The webpack configuration is a JavaScript object that you assign to a variable called module.exports in webpack.config.js.

Although we’ll produce just one output file, we’ll name each entry point. That way it will be easier to add more entry points when you create more advanced webpack configurations. Open webpack.config.js and add index.js as an entry point:

The value of the entry key is an object where each key represents an entry point name, and the value represents the path to the file relative to webpack.config.js. Name the index.js entry point app, and be sure to include the leading dot in the file path; otherwise, webpack will complain that it cannot find the file.

Now that you’ve configured the entry point, let’s configure the output files. That’s where webpack places the result of aggregating the modules. We’ll add a new property called output, which points to the absolute filesystem path of the output bundle. To ensure that absolute path definitions work whether you’re using Windows or a Unix-based operating system, you’ll define the output path with a Node.js function. Add this line at the top of webpack.config.js:

This imports a Node.js module to manipulate filesystem paths. There’s some work in progress to support the same JavaScript module system everywhere. The Node.js module system predates the one we’ll use in our application, so try not to get too confused by this.

Then tell webpack to output the bundled modules in an app-bundle.js file in the current directory.

Specify the output directory with the path property. The variable __dirname (with two underscores at the start) points to the current directory, and path.resolve uses the path module you just imported to output the absolute path from the filesystem root to the current directory. Then name the output file with the filename property. Include the entry name in the output name so you’ll be able to distinguish the source of different output files. webpack replaces [name] with the entry point name—in this case, app—so the output file name will be app-bundle.js.

After we have specified the entry and the output, we will tell webpack to transform our source with Babel. webpack’s module concept extends beyond JavaScript files; webpack considers any file that it knows how to concatenate with others and output into a bundle as a module. You can extend this with webpack add-ons called loaders, which are functions that transform or analyze the source code before webpack places it in the final output. Loaders process JavaScript, as well as CSS and even fonts and images, so any file type in your web application can become a module.

To tell webpack how to transform the source code, we need to add a loader and some rules that tell webpack which files we want to transform. We’ll do this in a new object inside the webpack configuration file. Create an object named module, then add an array called rules inside the module object. Each entry in the rules array contains rules to select a subset of the project files and the name of the loader that processes those files. To use Babel to transform the files with the js extension in the src directory, add an entry with the "babel-loader" string:

Each element in the rules array defines a type of file and the loaders to use for those files. webpack recognizes file types from their file names and locations on the file system. We select the target file names with the test regular expression—in this case, all files with a js extension. The dependencies in node_modules should already have been bundled correctly by their maintainers, so we skip them to speed up the build. To process only the src directory, add an include property with the path to the src directory. The use array contains the list of loaders to use—in this case, just babel-loader. That takes care of the webpack configuration. Next, we’ll configure the Babel transformation.

Joe asks:

This feels like a chore. Can’t we take a shortcut?

Once you understand what’s involved in the build, you can skip most of these steps by using react-create-app.^[13] This npm package lets you set up a build for a React application with a single command. But to use different libraries like CSS preprocessors or certain UI toolkits, you’ll still need to dig into webpack, so it’s important that you get a good picture of how it works.