Yeison Daza
4 min read

What's New and Configuring Webpack 4

This weekend Webpack 4 was released (codename Legato). This is a pretty important version, as a lot of work has been put into performance and following the zero-configuration concept #0CJS.

Let’s look at some of the most important new features.

What’s New

  • It’s much faster — up to 98% — because the development of this version was heavily focused on performance.
  • If you’ve worked with webpack, you know the amount of configuration you have to set up. This version focuses on the zero-configuration concept #0CJS. Webpack 4 has a feature called mode with two options: development and production. Here are the details of each mode. Now the default entry point is src/index.js and the output is dist/main.js.
  • CommonsChuckPlugin has been replaced. You can now use the optimize.splitChucks optimization.
  • WebAssembly is now supported by default. You can import Rust, C++, and C files.

You can see all the new features in the release notes.

Some plugins haven’t been updated yet. In the coming weeks, I assume versions that fully support webpack 4 will be released, since there have been significant changes in how plugins integrate.

But let’s create a project from scratch and see more details.

First Project with Webpack 4 and React

In this example, we’re going to set up a project with React. First, let’s create a project folder.

mkdir react-webpack4

cd react-webpack4

Initialize the package.json:

yarn init -y

Now let’s install webpack. We’ll add them as dev dependencies.

yarn add -D webpack webpack-cli

Now we can create a script in the package.json:

"scripts": {
  "build": "webpack"
}

If you run the command yarn build, you’ll get an error saying it can’t resolve .src. That’s because by default it looks for the file ./src/index.js.

Create that file and put something simple like:

console.log('prueba')

And run yarn build.

Now the file .dist/main.js will be created. At this point, we already have the project built, but we still need React and to set up our development environment.

First, let’s modify the scripts a bit:

"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
}

The mode flag assigns optimizations for each environment.

To use React, we need to add babel and the babel-preset-react preset.

Let’s install the necessary dependencies:

yarn add -D babel-core babel-loader babel-preset-env babel-preset-react

Let’s look at each dependency:

  • babel-core: The core we need to load presets
  • babel-loader: A loader to use babel with webpack
  • babel-preset-env: To transpile ES6+ features
  • babel-preset-react: To transpile JSX

Now we need to tell webpack to use babel. We can do this by creating a webpack.config.js file or by using the --module-bind js=babel-loader flag. In this case, we’ll use the latter.

"scripts": {
  "dev": "webpack --mode development --module-bind js=babel-   loader",
  "build": "webpack --mode production --module-bind js=babel-loader"
}

Now our setup is ready. We can create the project files. Inside ./src/index.js:

import React from 'react';
import { render } from 'react-dom';

const Hello = ({ name }) => {
  return <h1>hola {name}!</h1>;
};

render(<Hello name="mundo" />, document.getElementById('app'));

This will add our component inside an element with id app. For this, we need to create a base HTML file in ./dist/index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>app</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="./main.js" charset="utf-8"></script>
    </body>
</html>

The HtmlWebpackPlugin will have support for webpack 4 soon.

We also need a dev server. For that, we can use webpack-dev-server:

yarn add -D webpack-dev-server

And we modify the dev script:

{
 "dev": "webpack-dev-server --mode development --module-bind   js=babel-loader --content-base ./dist/"
}

We need to add the --content-base ./dist/ tag since it’s not looking at that path by default right now. In future versions, this won’t be necessary.

Now you can run yarn dev and your development environment will be up and running. When you’re ready to ship to production, just run yarn build.

You can find the final result in this repository.

Final Thoughts

The performance improvements in the build process have been incredible in this version, and according to the webpack team, there’s still plenty of room for improvement.

What build tool are you currently using?