TypeScript + Webpack

You want to quick start typescript and webpack project (server or client), what are the steps to do?

Create a blank dir

Let's say an http server :-)

mkdir tshttp && cd tshttp

Add webpack and typescript

yarn global add tsc typescript

And optionally browser-sync and its webpack plugin.

yarn add webpack ts-loader browser-sync browser-sync-webpack-plugin

Add nodejs types

yarn add @types/node

webpack.config.js

Use this code:

var webpack = require('webpack');
var BrowserSyncPlugin = require('browser-sync-webpack-plugin');

module.exports = {
    watch: true,
    entry: {
        'app': './src/app.ts'
    },
    output: {
        filename: './public/[name].js'
    },

    plugins: [
        new webpack.optimize.UglifyJsPlugin({minimize: true}),
        new BrowserSyncPlugin({
            // browse to http://localhost:3000/ during development, 
            // ./public directory is being served 
            host: 'localhost',
            port: 3000,
            server: { baseDir: ['public'] }
        })
    ],

    resolve: { extensions: ['.ts', '.tsx', '.js']},

    module: {
        rules: [
            { test: /\.tsx?$/, loader: 'ts-loader' }
        ]
    }
};

This has four parts:

• webpack
• browser-sync-webpack-plugin
• UglifyJsPlugin
• resolve .ts, .tsx and .js files with ts-loader