All the new things: setting up Webpack 4 with Babel 7

The fourth version of Webpack has been released with the promise of considerable speed improvements and the possibility of zero configuration builds. While it is possible to run a zero configuration build, you still have to do it when you have extra needs. In this tutorial I’ll explain how to set up Webpack with the newest version of Babel for development, testing and deployment. In the end you will feel comfortable with basic configuration setups. If you are interested in the code upfront, you can check it in my webpack-showcase repository.

The first compile

To get things going, we have to install Webpack alongside with its command line runner: npm install webpack webpack-cli. We also have to create the Javascript file we want to compile in src/index.js. The script that generates our bundle will look like this:

Webpack starts working and the compiled file appears in dist/main.js. The key to create a minified and optimized bundle is to change the mode flag to production.

With this setup we can compile our application, but it is not displayed in the browser. To display it two more packages are required: npm install webpack-dev-server html-webpack-plugin. Webpack Development Server can display the compiled files on a given port and the Html Webpack Plugin can inject the generated Javascript files into the HTML. At this point a configuration file is needed for adding the plugin.

After changing the start command in the package.json file to webpack-dev-server from webpack, we can check the result of the compile on http://localhost:8081/main.js. It is a much bigger version compared to the run with webpack only, because the webpack-dev-server adds many code to accomplish live reloading and hot reloading. These codes won’t be present in our production build, just in the development build.

The main HTML entry point doesn’t have to contain references to the compiled files, the plugin will automatically insert them. Now the application is available on http://localhost:8081.

Transpiling with Babel

Transpiling modern Javascript to a version that can run in older browsers can be done with Babel. Inside Webpack we can enable this transpilation with the Babel loader. Babel 7 and its loader is still in beta, so the dependencies should be installed with the next version: npm install babel-loader@next @babel/core @babel/preset-env. All is left is to add Babel to the configuration.

Webpack loaders can be added under module.rules as an Array. Each element defines for which files it will be applied to with a regular expression (test). Groups of files can be also excluded (exclude), as it is not necessary to transpile files under node_modules. Under the use property we can tell which loader to use with which options.

At this point if there is Javascript code that is written with modern syntax, like a class definition, it will be transpiled to its ES5 equivalent. Our modern Javascript application is ready for development and deployment.

Adding tests

When we write the code, we assume that it works as intended. But sometimes the code breaks and stops working or it did work but a fresh refactoring just left everything in ruins. These situations can be evaded with proper test coverage. The tests should be run in an environment as close to the real world usage as possible. This place is the browser.

The Karma test runner can simulate this environment with a test framework of choice (Jasmine) and a real browser (Chrome). Karma has mature plugins to wire up our configuration of Webpack, the browser and the test framework.

First we have to install Karma and the necessary plugins: npm install karma jasmine-core karma-webpack karma-jasmine karma-chrome-launcher. The next step is to write the configuration for Karma.

We have to tell Karma which files to execute as tests and this can be done with the files property. Every file in that Array can be an exact file or a file pattern styled as a blob pattern. Babel can be added through the Webpack configuration as a preprocessor for the test files. All is left is to choose the test framework with the frameworks property and the running environment with the browsers property. Karma also has a command line interface which can be run with the following command:

Finalizing: deploying the application

The application can produce a minimized and optimized output with Webpacks production mode, all is left is to deploy it to a place where everyone can see it. For open source projects a good place can be the repositories Github page. Github Pages offer free hosting and can be deployed to with a single package.

The gh-pages npm package pushes up the desired directories content to the gh-pages branch, which will be automatically deployed to Github Pages. We have to add the default Webpack destination folder dist: gh-pages -d dist and it goes live.

Summary

With minimal configuration steps, we managed to set up the development, testing and deployment of a Javascript application with Webpack, Babel and Karma. The above libraries play nicely together through plugins. Nowadays the configuration needed to wire them together is significantly less complicated. Hope the above examples prove everyone that setting up a Webpack build is not black magic.