Using WebPack to Create Separate Distribution for Internet Explorer

 

In this post we will use webpack to create two distributions. The first would be for Internet Explorer, and the second would be for all other browsers. This would enable us to reduce the size of the distribution for most of the end users, and supply a compatible distribution for IE users.

First we need to update the build to run the webpack twice, once for the default users, and once for IE users.

package.json

...
"scripts": {
  "build": "webpack --config webpack.config.default.js && webpack --config webpack.config.ie.js",
...

The IE webpack includes the following:

webpack.config.ie.js

const config = {
  
  
  ... // skipping non relevant configuration
    
  entry: {
    index: ['core-js/stable', path.resolve(__dirname, './index.js')],
  },
  output: {
    path: path.resolve(__dirname, 'build/ie/'),
  },
}


config.module.rules[1].use.options.presets = [
  [
    '@babel/preset-env',
    {
      'debug': false,
      'targets': {
        'ie': '11',
      },
      'useBuiltIns': 'usage',
      'corejs': {
        'version': 3,
      },
    },
  ],
]

For more details of IE transpilation, see this post.

The default webpack includes:

webpack.config.default.js

const config = {

  ... // skipping non relevant configuration

  entry: {
    index: [path.resolve(__dirname, './index.js')],
  },
  output: {
    path: path.resolve(__dirname, 'build/default'),
  },
}

config.module.rules[1].use.options.presets = ['@babel/preset-env']

Now, running the build process creates two folders: build/ie for the IE distribution, and build/default for all of the other browsers.

In case using NGINX as a web server for the distribution, it can be configured to use the relevant distribution folder, see this post for details.