How To Create Ie11 Bundles With Webpack 5 And Babel 7

How can we compile modern JavaScript into backwards-compatible JavaScript bundles that can be used with Internet Explorer 11 (ie11)? Specifically, how can we do this with the late

Solution 1:

Here's the most minimal configuration I could create, with a test file that's included to test with IE 11. Download on GitHub.

package.json

{"browserslist":["ie 11"],"scripts":{"dev":"webpack -w","build":"webpack"},"devDependencies":{"@babel/core":"^7.12.9","@babel/preset-env":"^7.12.7","babel-loader":"^8.2.2","core-js":"^3.8.0","webpack":"^5.8.0","webpack-cli":"^4.2.0"}}

webpack.config.js

module.exports = {
  entry: './index.js',
  module: {
    rules: [{
      test: /\.m?js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: [
            ['@babel/preset-env', {
              useBuiltIns: 'usage',
              corejs: 3
            }]
          ]
        }
      }
    }]
  }
}

Greeting.js

exportdefault'2020 has been one hell of a year!'

index.js

/* 
 * Test that uses modern JavaScript and will be compiled to work in IE 11
 */import greeting from'./Greeting'window.addEventListener('load', async () => {
  const o = {
    greeting: awaitPromise.resolve(greeting)
  }

  console.log(
    o,
    Object.entries(o),
    Object.keys(o),
    Object.values(o),
  )
})