Polyfill, Vendors and App Bundle using Webpack 4

My goal was to have a polyfill.js bundle generated by Webpack 4 that gets inserted into the apps index.html file before any other Javascript as it must load and install the Poly- or Ponyfills before even vendor code runs.

This means I basically like to have the following budles loaded:

1. polyfills.js
2. vendors.js
3. app.js

I struggled with this and it took me quite some time to figure it out so I give it write.

Solution

First of all I added a file which does two things: a) reference the polyfill libraries I need to b) initialise them as needed. In my case I needed es6-symbol (for InversifyJS), es-promise and whatwg-fetch.

src/polyfill.js:

/* Load polyfill:
* This file and its dependencies get bundled into the "polyfills" chunk by WebPack and loaded as first scripts.
* Add loading code of further polyfills in here as needed. */

const es6_symbol = require('es6-symbol/implement');
console.debug(es6_symbol);

const es6_promise = require('es6-promise/auto');
console.debug(es6_promise);

import 'whatwg-fetch';

I then used this file as a second entry point besides my apps main file for Webpack 4:

    entry: {
       polyfills: './src/polyfills.js',
       app: './src/index.tsx'
    },

Then I had to configure the output to use the junkname parts for the generated Javascript bundle files:

    output: {
       filename: '[name].bundle.js',
       chunkFilename: '[name].bundle.js',
       path: path.resolve(__dirname, 'dist')
    },

With Webpacks 4 ‘s new optimization block I split all libraries from node_modules into a chunk/bundle called vendors:

    optimization: {
        splitChunks: {
           cacheGroups: {
              commons: {test: /[\\/]node_modules[\\/]/, name: "vendors", chunks: "all"}
          }
       }
    }

This way I get polyfills.bundle.js, vendors.bundle.js and app.bundle.js. Then I use the HtmlWebpackPlugin to patch the scripts HTML tags into the index.html.

The problem with this is that the scripts-tags are generated in the wrong order so polyfills.bundle.js will not be loaded as the first package which results in errors. To address this I had to do quite a while of research so I figured one can change the chunk sort mode to manual and specify the chunks in the chunks field as a string array.

chunksSortMode: "manual",
chunks: ['polyfills', 'vendors', 'app'],

I could not find any official documentation about this option but finally got hints in the GitHub issues that this option exists and one hint how to use them.

Here is my the more complete webpack.config.js:

webpack.config.js:

const path = require("path");
const webpack = require("webpack");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    entry: {
       polyfills: './src/polyfills.js',
       app: './src/index.tsx'
    },
    output: {
       filename: '[name].bundle.js',
       chunkFilename: '[name].bundle.js',
       path: path.resolve(__dirname, 'dist')
    },
    devtool: "source-map",
    resolve: {
       extensions: [".ts", ".tsx", ".js", ".jsx", ".json"]
    },
    module: {
       rules: [
          ...
       ]
    },
    plugins: [
       ...,
       new HtmlWebpackPlugin({
          template: "src/index.html",
          filename: "index.html",
          chunksSortMode: "manual",
          chunks: ['polyfills', 'vendors', 'app'],
       })
    ],
    optimization: {
        splitChunks: {
           cacheGroups: {
              commons: {test: /[\\/]node_modules[\\/]/, name: "vendors", chunks: "all"}
          }
       }
    }
};