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

marcd View All

I love to write software. More then two decades ago I managed to make my hobby my full-time job so I spent more then 20 year writing professional software (I guess that makes me a "Senior Software Developer"). The last few years I spend most of the time developing in C#/.Net for all kind of windows-, web- and embedded-software.

In my free time I enjoy my family, taking photos and go diving in cold lakes and rivers in Switzerland.

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: