Add example how to implement polyfill

[alexander-akait]

// entry.js
(async () => {
  if(isLegacyBrowser()) await import("./polyfills?legacy");
  else await import(/* webpackMode: "eager" */ "./polyfills");
  await import(/* webpackMode: "eager" */ "./app");
})();

// polyfills.js
import "core-js";
import "regenerator-runtime";

// webpack.config.js
// ...
module.rules: [
{
  test: /\.js$/,
  include: [ path.resolve(__dirname, "src") ],
  oneOf: [{
    resourceQuery: "?legacy",
    loader: "babel-loader",
    options: {
      useBuiltIns: "entry".
      browserslistEnv: "legacy"
    }
  }, {
    loader: "babel-loader",
    options: {
      useBuiltIns: "entry".
      browserslistEnv: "modern"
    }
  }]
}
]

But this would only handle polyfills and not transpiling...

---

If you want to handle transpiling too, you have to compile your app twice in different modes.

Often people just create two webpack config and compile twice, but it's also possible to use layers for that:

// webpack.config.js
entry: {
    modern: {
        import: "./app",
        layer: "modern"
    },
    legacy: {
        import: "./app",
        layer: "legacy"
    },
},
module.rules: [
    {
        test: /\.js$/,
        include: [ path.resolve(__dirname, "src") ],
        oneOf: [{
            issuerLayer: "legacy",
            loader: "babel-loader",
            options: {
                useBuiltIns: "usage".
                browserslistEnv: "legacy"
            }
        }, {
            issuerLayer: "modern",
            loader: "babel-loader",
            options: {
                useBuiltIns: "usage".
                browserslistEnv: "modern"
            }
        }]
    },
    {
        test: /\.css$/,
        layer: "shared"
        // best switch the layer to compile parts only once
        // layer is inherited from parent otherwise
    }
]

or

// entry.js
(async () => {
  if(isLegacyBrowser()) await import("./polyfills?legacy");
  else await import(/* webpackMode: "eager" */ "./polyfills");
  await import(/* webpackMode: "eager" */ "./app");
})();

// webpack.config.js
module.rules: [{
    resourceQuery: "?legacy",
    layer: "legacy"
}]

Originally posted by @sokra in webpack/webpack#13241 (comment)

[alexander-akait]

It is old, but I still getting questions how developers should do it