Webpack Starter Kit With Typescript

You can find the files for this article in my Webpack Starter Kit GIT repository

If you are a React/NextJS/Vue/Angular/Svelte or any of the other amazing JavaScript front end framework developer then you might already using be using something Webpack in the background (many of them do) and although these frameworks do a fantastic task of minifying their code foot print, have you ever wanted to create it as small as you possibly can? Or have you ever wanted out of just pure curiosity to create a bare bones vanilla JS script?

Well this is where you might want to consider using just Webpack on it's own, and this starter kit can be used as either a template to start from, or just something to learn how it works.

I've deliberately kept it smallish in size but with enough functionality to demonstrate it's core functionality.

Using Typescript

I've also purposely used Typescript instead of plain JavaScript in this example, the reason behind this is that if we are using Webpack that we can use Typescript in our source files as it will compile to Vanilla JS anyhow. You've probably heard how any developer who has switched to Typescript finds it so much nicer to work with once they have figured out how it all works, and I now love it. So I've included it in this example. If you haven't learnt how to use it, then I suggest you just start trying... you'll soon be thanking me!

Lets get Webpacking...

Ok, so once you've downloaded the repository there is a directory called ./dev/ and it contains the following files:

├── dev
│   ├── assets
│   │   ├── css
│   │   │   ├── custom1.css
│   │   │   └── style.css
│   │   └── js
│   │       ├── custom1.ts
│   │       ├── custom2.ts
│   │       └── index.ts
│   └── index.html
├── package.json
├── tsconfig.json
└── webpack.config.js   

(I've ignored any readme or Licence files in the above)

Everything within our ./dev directory is where we can start editing files. So to start lets first install the NPM modules that are listed in our package.json file:

yarn install (or npm works fine) - installs all the bits and bobs

Then once done run yarn dev - this should open up our index.html file at http://localhost:3000 in a browser, and our CSS files and TypeScript files will be compiled into a main.mss and bundle.js files respectively.

If we then run yarn build a new directory ./dist/ will be created and contain just 3 files:

└── dist/
    ├── bundle.js       (357 bytes)
    ├── index.html      (601 bytes)
    └── main.css        (298 bytes)

These are all minified, and as you can see are tiny files. Hey presto we've just built our first pure Vanilla JS/TS application using Webpack to bundle and compress our files!

What does this application do?

Well... nothing really, it's purely a demo. It simply outputs a HTML page with a h1, p, ul, & li tags, and outputs some console logs. The point is that this is a starter package for you to do with as you please!

Further Editing

Webpack is a beast once you get into it, and I suggest you take a look at the full documentation over at https://webpack.js.org/ if you want to really get your hands dirty with it. But let me show you one quick addition we can make to our starter kit.

Lets say we had some extra files that we wanted to include in our production build (you could always load them externally, but lets say in this case we want them locally) - first off uncomment these lines within the webpack.config.js files:

    new CopyPlugin({
      patterns: [
        {from: "dev/assets/img", to: "assets/img"},
        {from: "dev/robots.txt", to: "robots.txt"},
        {from: "dev/assets/js/third-party-library.js", to: "assets/js/third-party-library.js"},
      ],
    }),

Now lets add in 2x images, a robots.txt file and a fake script called third-party-library.js like this:

├── dev
│   ├── assets
│   │   ├── css
│   │   │   ├── custom1.css
│   │   │   └── style.css
│   │   └── js
│   │   │   ├── custom1.ts
│   │   │   ├── custom2.ts
│   │   │   ├── index.ts
│   │   │   └── third-party-library.js
│   │   └── img
│   │       ├── image1.jpg
│   │       └── image2.png
│   ├── robots.txt
│   └── index.html
├── package.json
├── tsconfig.json
└── webpack.config.js   

We can then include these files by adding them into our HTML manually like this:

<img src="./assets/img/image1.jpg" /> 
<img src="./assets/img/image2.png" />
<script src="./assets/js/third-party-library.js"></script>

And when we run yarn build our files will be copied over to our production folder! This example is not perfect, but merely used to demonstrate how we can tweak our Webpack config to tailor it to our needs!

Happy Webpacking & enjoy!