Some questions about integrating with HtmlWebpackPlugin babel-env and browserslist.

[freyjadomville]

It's more of a query than an issue, but your README doesn't contain the documentation for this, and I have some questions about integration with an existing codebase, having seen your plugin on https://estimator.dev/:

1. How would you suggest generating the HTML template for HtmlWebpackPlugin? We currently have several of the following, as an example:

new HtmlWebpackPlugin({
        inject: false,
        filename: '../../../Heritage.HE.Web/Views/Partials/Tags/_HeadTags.cshtml',
        template: './src/templates/headTags.html',
      }),

2. Do our .babelrc presets and plugin file have to be separated out instead of passing it as an integrated config option (our current codebase passes that in through config)? So you know what I mean, this is our current babel config - we use something that's a little complex in terms of plugins and presets, thanks to some react components.

{
  test: /\.js$/,
  exclude: /node_modules/,
  use: {
    loader: 'babel-loader',
    options: {
      plugins: [
        '@babel/plugin-proposal-function-bind',
        ['@babel/plugin-proposal-class-properties', { 'loose': false }],
        '@babel/plugin-syntax-dynamic-import',
      ],
      presets: [
        ['@babel/preset-env', {
          corejs: 3.6,
          useBuiltIns: 'usage'
        }],
        '@babel/preset-react',
      ],
    },
  },
},

3. We currently define our browswerslist in our package.json for babel-env to chew on. If we defined such a list in the .babelrc, would it have an effect and would it affect the module or nomodule bundle?

[freyjadomville]

Additionally, our entry point looks like this, as a dependency needs map and set to be polyfilled for IE11.

entry: [
      'core-js/modules/es.promise',
      'core-js/modules/es.array.iterator',
      'core-js/modules/es.map',
      'core-js/modules/es.set',
      './src/js/index.js',
    ],

[developit]

Hiya - you need to move the babel configuration into a babelrc or babel.config.js, and to remove babel-loader. OptimizePlugin uses your babel config for the modern bundles only.

The legacy bundles are compiled to ES5 without looking at custom configuration, but their syntax level will be based on your browserslist.

You should remove the custom configuration for Set and Map. Both those API's are supported in IE11, and any additional usage will get automatically polyfilled in your legacy bundles.

The premise of this plugin is essentially that you don't need to ever manually configure transpilation or polyfilling - it's all done automatically based on usage.

[alireza-mh]

I also wanted to open an issue about documentation and that I couldn't make it to optimize our application even further. Is there a demo that we can play with and see the configs and compare results?
@developit Thanks for the explanation. How is that different from using babel-env plugin with useBuiltIns option with usage value?

[freyjadomville]

Hiya - you need to move the babel configuration into a babelrc or babel.config.js, and to remove babel-loader. OptimizePlugin uses your babel config for the modern bundles only.

The legacy bundles are compiled to ES5 without looking at custom configuration, but their syntax level will be based on your browserslist.

You should remove the custom configuration for Set and Map. Both those API's are supported in IE11, and any additional usage will get automatically polyfilled in your legacy bundles.

The premise of this plugin is essentially that you don't need to ever manually configure transpilation or polyfilling - it's all done automatically based on usage.

Thanks, I will give this a shot this week and report any issues here.

[developit]

Added this to the FAQ.
https://github.com/developit/optimize-plugin#faq