Skip to content

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"}
          }
       }
    }
};

One thought on “Polyfill, Vendors and App Bundle using Webpack 4 Leave a comment

  1. This is interesting. I am currently in the process of upgrading a general Webpack workflow from v3 to v4 for some Angular R&D. Right now, I have a “polyfilly” entry-point, which seems to be loading in the right order. But, I am not sure if that is due to coincidence; or, if Webpack is doing something intelligent. Hence, your blog. The “manual” order is an interesting take. I’m gonna bookmark; but, will probably wait for my current approach to break. I just want to make sure I’m not fixing a problem I don’t have yet.

    Liked by 1 person

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: