WebPack with AngularJS & Typescript

The exercise of moving an AngularJS project from a pile of links into a nice clean package is easy…. except it really isn’t.

Once you have everything all set up, however, it’s a snap. Webpack makes it easy for us to do this; once it is set up.

What is missing online is often the explanation of how something works rather than how to make it work. Webpack is a “bundler”. It is designed to grab a bunch of discordant files and jam them all into a single file. With any luck, reducing it’s size a bit in the process.

TypeScript actually has a great ability to link files. I happen to divide up my work in “namespaces”, so that lets me keep some order and control of scope in the project (my projects often have hundreds and hundreds of files).

So, the first thing you need to have set up is your package.json file. Here is a simple one:

{
  "name": "tools",
  "version": "1.0.0",
  "description": "some random application",
  "main": "app/main.ts",
  "dependencies": {
    "webpack": "^3.4.0",
    "awesome-typescript-loader": "^3.2.1"
  },
  "devDependencies": {
    "awesome-typescript-loader": "^3.2.1",
    "webpack-dev-server": "^2.6.1"    
  },
  "scripts": {
    "start": "webpack-dev-server --env development",
    "build": "webpack",
    "production": "webpack -p"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Honestly, the only thing you “really” need in there is the scripts and dependencies. For the most part, that’s just a script saying “start webpack-dev server in development mode. which is a “hot” mode, where it recompiles as you make changes… which is very cool.

So, now that you have that, as soon as webpack kicks off, or the webpackdev-server kicks off webpack, it hunts for the webpack.config.js file in the root directory. It really is pretty simple. It says, “start here and compile all the scripts that are connected to this one and jam them together.” However, with Typescript, it runs a “loader”, which simply says, “go transpile this first”.

So, this “loader” section is where it’s running Typescript, so it’s going to the tsconfig.json file to see what you are using typescript for and how it should come out. This is important!

You need to be using commonjs. In the past, I just had it compile into an outfile here, but typescript doesn’t really have the added features of webpack, in regards to pulling in other stuff, like CSS and even html files or even doing things like setting global functions and variables.

Anyway, your tsconfig.json should look a bit like this.

{
  "compileOnSave": true,
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
   // "outFile": "js/tsc.js",
    "sourceMap": true
  },

  "include": [
    "app/**/*"
  ],
  "exclude": [
    "app/includes/**",
    "node_modules",
    "bower_components",
    "js"
  ]
}

There’s always a bunch of crap in there, but basically commonjs works and you can’t have an outfile.

webpack.config.js

'use strict';  
var webpack = require('webpack') 

var APP = __dirname + '/app';  /* __dirname is a constant with webpack that is the current dir path */
 
module.exports = {
  entry: {
      filename:'./app/main.ts'  /* this is where you start your app */
        },
  output: {
    filename: './bundle.js'    /* this is where it's going to end up */
  },
 devtool: 'source-map',       /* if you want, you can have a source-map along with it so you can debug */
  resolve: {
    extensions: [ '.js','.ts']  /* you need both. */
  },
  module: {   
    loaders: [
      { test: /.ts$/, loader: 'awesome-typescript-loader' }  /* this transpiles all the ts in memory!  */
    ],
    
  }
};

So here, we bring in the webpack code (which was in npm, so it’s globally accessible via require) and we get the local path that webpack is going to use when it starts writing files.

So, package.json is nice for dependencies, etc… but all it does here is contain the trigger. (If you want, you can just type webpack at the root directory from the command line and it will work without the package.json.)
The webpack.config.js file tells it where the thing starts. Now, that should get you going. I’d try it on a small app first (I didn’t, but that’s why it cost me so much grief installing it!)

So, you need webpack, webpack-dev-server, and awesome-typescript-loader all installed via NPM.

Now, using programming for webpack is a whole different story. I’ll post that separately.