TypeScript Section 11 – Using Webpack with TypeScript


TypeScript

Updated Mar 14th, 2022

Table of Contents

Chapter Details

Module Introduction

Splitting into separate code we do have a disadvantage and the solution.

What is Webpack & Why do we need it?

Every request takes some time. See the waterfall in the network tab. Webpack helps us with this.

Also helps us minify or optimize our code.

With Webpack we no longer need an external server like “live-server.”

Installing Webpack & Important Dependencies

npm install --save-dev webpack webpack-cli webpack-dev-server typescript ts-loader

We install the “typescript” package to lock in a version of TS. The “ts-loader” package is to help Webpack bundle the TS files.

Adding Entry & Output Configuration

"target": "es5" // or es6
"module": "es2015"
"outDir":"dir"

// don't need root dir

Add the “webpack.confi.js” file.

const path = require('path')

module.exports = {
  entry: './src/app.ts',
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist") 
  }
}

We remove all the “.js” file extensions from the imports now. Needed for native browser built-in functionality but we do not need now.

Adding TypeScript Support with the ts-loader Package

Tell Webpack what to do with the TS files it finds by adding a “module” property.

const path = require('path')

module.exports = {
  entry: './src/app.ts',
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist") 
  },
  devtool: 'inline-source-map',
  module: {
    rules: [
      // css or images or other; see webpack docs
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      }
    ]
  },
  resolve: {
    extensions: [".ts", ".js"]
  }
}

In the “tsconfig.js” file set “sourceMap” to true and add a “devtool” property to the code above.

A simple way to use Webpack is to go to “package.json” file by creating a “script” called “build” and set to “webpack”

We will now be bundling and no longer have an http request for each file import.

Finishing the Setup & Adding webpack-dev-server

We want to add “webpack-dev-server” by adding this to the “build script” in the “package.json” file. In “webpack-dev-server” mode it keep the bundles file in memory and so your “dist” folder will remain empty. Alos, in order for use to be able to view our project on the local server we need to add a “publicPath” key.

We also want to set a “mode” key set to “development.”

const path = require('path')

module.exports = {
  mode: "development",
  entry: './src/app.ts',
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
    publicPath: "dist"
  },
  devtool: 'inline-source-map',
  module: {
    rules: [
      // css or images or other; see webpack docs
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      }
    ]
  },
  resolve: {
    extensions: [".ts", ".js"]
  }
}

Adding a Production Workflow

For production we typically want a different workflow. We can add to the same file with an “if statement” or we can add an entirely separate “webpack.config.prod.js” file.

const path = require('path')
cosnt CleanPlugin = require('clean-webpack-plugin')

module.exports = {
  mode: "production",
  entry: './src/app.ts',
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  devtool: 'none',
  module: {
    rules: [
      // css or images or other; see webpack docs
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      }
    ]
  },
  resolve: {
    extensions: [".ts", ".js"]
  }
  plugins: [
    //auto-deletes existing dist folder contents on rebuild
    new CleanPlugin.CleanWebpackPlugin()
  ]
}
npm install --save-dev clean-webpack-plugin

Update your “build script” in the “package.json” file

"build":"webpack --config webpack.config.prod.js"

Wrap Up

Webpack is a very important tool to speed up our application. It is highly configurable. Checkout the Webpack documentation. Must-use in any modern project.

Useful Resources & Links