Getting Started With Webpack

Navigate to your source directory (not public) and run:

If you haven't got a package.json file yet, then create one with

npm init -y

Now we need webpack when developing the software, to compile out the assets. Hence we will use --save-dev:

npm install --save-dev webpack

It would also probably be useful to install the webpack CLI utility.

npm install --save-dev webpack-cli

Now because all of my projects are actually typescript based, and I will need typescript to be compiled before bundling the outputted javascript together, I will run:

npm install --save-dev typescript ts-loader

Next, let add a two "build" scripts by editing the package.json file and addinto the scripts block:

"scripts": {
    "build-dev": "webpack --mode=development --config webpack.config.js",
    "build-prod": "webpack --mode=production --config webpack.config.js"
}

I'm never going to remember those commands, so I create a build-dev.sh and build-prod.sh set of bash scripts instead. E.g. npm run-script build-dev and npm run-script build-prod

More information about the two modes.

This allows us to clearly differentiate between building for production, and building for development. There will be key differences, like whether to build using obfuscation or not.

Now whenever we want to run the script, we just run:

npm run-script build

However, before that, we need to create the webpack configuration file, which tells webpack what to do in its build:

editor webpack.config.js

Since I like to have my directory structure with the public assets inside a public folder beneath my top-level src, site, or app directory, I will use the following configuration:

const path = require('path');

module.exports = {
    entry: './ts/index.ts',
    module: {
        rules: [
            {
                use: 'ts-loader',
                exclude: /node_modules/,
            }
        ],
    },
    resolve: {
        extensions: ['.ts', '.js'],
    },
    output: {
        filename: 'App.js',
        path: path.resolve(__dirname, 'public/js'),
    }
};

To run the webpack cli:

./node_modules/webpack-cli/bin/cli.js

I want to be able to call my bundle from <script> tags so I ended up outputting a "library" rather than an app:

    output: {

        // using this "library" method was only way i could figur out how to
        // expose the compiled stuff to the "outside" and do things.
        library: 'MyApp',
        libraryTarget: 'umd',

        filename: 'App.js',
        path: path.resolve(__dirname, 'public'),
    }

Extras

Tsconfig.json

In case I need it later, below is my typescript configuration file:

{
    "compilerOptions": {
        "target": "ES5",
        "module": "es2015",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false,
    },
    "exclude": [
        "node_modules"
    ]
}

Exporting Classes

All of my Typescript classes are in separate files with an export. E.g. for my Utils.ts library of useful functions:

export class Utils
{
    /**
     * Generate a fresh UUID.
     */
    public static generateUuid() : string
    {
        // do something
    }
}

Then whenever you need to use these classes, you can do so by using the relevant import

import { ConnectionStatus } from "./ConnectionStatus";
import { Meeting } from "./Meeting"
import { MeetingEvent } from "./MeetingEvent";

export class MyClass
{
    // stuff here.
}

References

• Webpack docs - Installation