Webpack with Babel 7

This article uses a demo web application that does nothing but simple javascript to write to the browser DOM. It does not go into the detail of configuring various Webpack plugins or Babel plugins for complex applications like SPAs. The source for the application can be located at https://github.com/seetd-knowledge/es6-webpack4-babel7.

The following sections detail the actions carried out to create this application. The application starts with the following tree:

.
├── LICENSE - MIT License file for the repository
├── README.md - File describing the repository
├── package.json - Configuration file for npm package
└── src - Folder containing all the application files
├── Controller.js
├── index.js
└── index.template.html

Step 1
In the root folder of the application, we run the following command npm install --save-dev webpack webpack-cli. This will install the webpack which contains the code for the bundling operations and webpack-cli which provides the command line access for Webpack. We passed the option --save-dev to indicate that we want npm to save these packages as a development dependency in package.json

Step 2
Next since the Webpack packages are not installed into the global node_module , a simple modification is required for package.json that will allow this to run the locally installed webpack-cli . This uses npx package that is available only from npm version 5.2.0 onwards. npx allows us to run the task npm run build which executes Webpack after adding a new property “build”: “webpack” to the scripts property in package.json . For npm version < 5.2.0 please refer to footnotes ¹.

Step 3
This step installs the minimal packages required for Babel 7 to work with Webpack for a web application. Since Babel 7 is new, some of the versions used here are tag to beta. In the event, versions > then those in the article introduces breaking changes this article will be updated whenever possible. First run npm install --save-dev "[email protected]" @babel/core @babel/preset-env html-webpack-plugin script-ext-html-webpack-plugin in the terminal. The following packages will be installed as development dependencies since the packages will not be used in runtime.

1. @babel/core — This is the engine that will pick up all the configuration provided to run plugins to transpile the latest version of JavaScript through syntax transformers into plain vanilla versions supported by the target platform. Notice that this uses@babel/ which means it is a scope package².
2. @babel/preset-env — This scope package is a Babel preset that compiles code down to ES5 by automatically determining the Babel plugins and polyfills needed based on the targeted browser or runtime environments. By default it behaves exactly the same as babel-preset-latest (or babel-preset-es2015, babel-preset-es2016, and babel-preset-es2017 together)³ .
3. [email protected] — This is the Babel plugin for Webpack, it will be added to the Webpack configuration to instruct it to run the target files though Babel during the bundling process. Note that it is not using scope packages and that there is a version tag since this is the current recommended version for Babel 7 ⁴.
4. html-webpack-plugin — This is a Webpack plugin that allows as to bundle and process HTML files. It is not really required by the bare minimal setup but is helpful to get the HTML files into the distribution
5. script-ext-html-webpack-plugin — This is a Webpack plugin which is not really required by the bare minimal setup as well. But it allows the automation of injecting the bundled javascript into the HTML files that is included in the distribution

Step 4
In this step the package to allow the Webpack configuration file to be written using ES6 is installed. Run npm install --save-dev @babel/register in the terminal. The following packages will be installed as development dependencies since the packages will not be used in runtime.

1. @babel/register — This scope package provides the require hook that will bind itself to node’s require and automatically compile files on the fly for Babel. Webpack uses js-interpret⁵ internally to call register the package as a module to transpile the Webpack configuration file for execution. It requires the file to be named with a .babel.js suffix to work.

Step 5
The final step creates the Webpack configuration file webpack.config.babel.js used to configure Webpack. The full details of the configuration file will not be covered here⁶. But in short it gets the entry javascript file provided and processes it through the modules. It uses plugins to make sure the html is processed as well. The important thing to note is the file is named with a prefix webpack.config which is part of the default filename use by Webpack. It also uses the suffix babel.js that is used by js-interpret to identify configuration files that needs to be transpiled by Babel.

import path from 'path';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import ScriptExtHtmlWebpackPlugin from 'script-ext-html-webpack-plugin';

export default {
entry: path.join(__dirname, 'src/index.js'),
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].bundle.js'
},
module: {
rules: [{
test: /\.js/,
exclude: /(node_modules|bower_components)/,
use: [{
loader: 'babel-loader'
}]
}]
},
plugins: [
new HtmlWebpackPlugin({
title: 'Custom template',
template: path.join(__dirname, 'src/index.template.html')
}),
new ScriptExtHtmlWebpackPlugin({
defaultAttribute: 'defer'
})
],
stats: {
colors: true
},
devtool: 'source-map'
};

Step 6
In the final step, a configuration file is created for Babel .babelrc⁷. This is the default file name used by Babel for defining the configuration during the Babel transpilation process.

{
"presets": ["@babel/preset-env"]
}

Final Step
With all the setup done, this will be the final directory tree of the project. (node_modules has been ignored to keep this concise)

.
├── LICENSE
├── README.md
├── package-lock.json
├── package.json
├── src
│ ├── Controller.js
│ ├── index.js
│ └── index.template.html
└── webpack.config.babel.js

The command npm run build can be ran in the root folder that will generated the bundled Javascript file and generated html file in the dist folder detailed in the configuration.

Conclusion

This article provides a simple implementation of how setup Webpack to use Babel 7 for both the configuration of Webpack itself and also the bundling of code using ES6. It does not cover all the use cases of Webpack or Babel with the hope that it provides a basic understanding of these tools that can be expanded by the reader. The companion code used can be found at https://github.com/seetd-knowledge/es6-webpack4-babel7. Suggestions or fixes to the article to make it more useful for everyone will be welcomed. But the author is not doing this full time so response might take time.