Configure Async / Await ES7 in Webpack 4

Configure Async / Await ES7 in Webpack 4

TL;DR 🚀 Assuming you already have webpack in place, here are few more steps to make ES7 Async / Await works:

• npm i --save-dev @babel/polyfill
• add @babel/polyfill to webpack.config.js entry

Updated to Sep 2019, IE 11 still doesn’t support Async/Await :

There are some third-party libraries which might be helpful, but they are quite old and not easy to use, such as preset-stage-0, regenerator, or babel-polyfill,…

The @babel/preset-env library is mentioned but it may show ReferenceError in console when running the app.

ReferenceError: regeneratorRuntime is not defined

The @babel/polyfill in this article is officially supported by Babel, so it’s definitely the right choice.

My full webpack.config.js is:

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
module.exports = {
  mode: "development",
entry: ["@babel/polyfill", "./src/app.js"],
output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "bundle.js"
  },
module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ["babel-loader"]
      }
    ]
  },
plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      filename: "index.html"
    })
  ],
watch: true,
devtool: "source-map",
devServer: {
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    port: 9000
  }
};

Some options such as html-webpack-plugin or devServer is optional, feel free to ignore them in your project.

Package.json:

{
  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack"
  },
  "devDependencies": {
    "@babel/cli": "^7.6.0",
    "@babel/core": "^7.6.0",
    "@babel/node": "^7.6.1",
    "@babel/polyfill": "^7.6.0",
    "@babel/preset-env": "^7.6.0",
    "babel-loader": "^8.0.6",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.40.2",
    "webpack-cli": "^3.3.9",
    "webpack-dev-server": "^3.8.1"
  }
}

And the project structure:

.babel.rc — in case you don’t want to search for it 😄

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

You can find the full project in my github repo.

Questions? Comments? All welcome!

Thanks for reading!