how to use vscode to write and debug webpack typescript running in the browser (chromium)

how to use vscode to write and debug webpack typescript running in the browser (chromium).md

how to use vscode to write and debug webpack typescript running in the browser (chromium)

goals

• write typescript in vscode
• build, package and serve js using webpack
• execute js in browser (chromium)
• debug from vscode

pre-requisites

operating system

• ubuntu (debian linux)

browser

• chromium (chrome will also work with minimal changes)

ide

• vscode

nodejs infrastructure installed

• nodejs
• npm

process

starting from scratch - bare project directory

1. initialize nodejs project

to create a package.json for the project, execute

$ npm init

then follow the walk-through.

2. install typescript infrastructure

$ sudo npm install typescript

3. create typescript compiler settings file

• tsconfig.json
• in the project root directory

e.g.

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "sourceMap": true,
        "outDir": "built"
    }
}

target

ECMAScript target version

• "ES3" (default)
• "ES5"
• "ES6"/"ES2015"
• "ES2016"
• "ES2017"
• "ESNext" - latest support

module

module code generation

• "None"
• "CommonJS"
• "AMD"
• "System"
• "UMD"
• "ES6"
• "E1S2015"
• "ESNext"

outdir

dump compiled ouput files in this file system directory otherwise tsc will just dump the compiled files next to the source ones

4. create compile from typescript vscode task

tasks expected to be defined in tasks.json file, in project root directory

e.g.

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "tsc",
            "type": "tsc",
            "tsconfig": "tsconfig.json",
            "problemMatcher": [
                "$tsc"
            ]
        },
     ]
}

5. install and configure webpack

assuming that we have

• an application entry point @ file src/index.ts
• static files @ directory src/static

and that we want

• an output bundle index.js

install webpack & webpack-dev-server packages
$ npm i --save-dev webpack webpack-dev-server webpack-cli

install copy-webpack-plugin webpack plugin to server static files from dev server
$npm i --save-dev copy-webpack-plugin

install typescript loader $npm i --save-dev ts-loader

create file webpack.config.js in the project root directory:

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  mode: 'development',
  watch: true,
  entry: './src/index.ts',
  devtool: 'inline-source-map',

  plugins: [
    new CopyWebpackPlugin([ { from: 'src/static', to: '' } ])
  ],

  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }, 
    ]
  },
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ]
  },
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000
  }
};

6. create launch.json file in project root

{ "version": "0.2.0", "configurations": [

    {
        "type": "node",
        "request": "launch",
        "name": "build and run",
        "preLaunchTask": "build", 
        "program": "${workspaceFolder}/built/index.js",
        "outFiles": [
            "${workspaceFolder}/built/**/*.js"
        ]
    }
]

}