TypeScript Day 3 — webpack & babel

1. webpack

• Usually, real development work needs a build tool to bundle the code, and TS can be used together with a build tool just fine. Below I'll use webpack as an example to show how to use TS with a build tool.

• Steps:

  1. Initialise the project

     • Go into the project root and run the command npm init -y
       • Main purpose: create a package.json file

  2. Download the build tool

     • npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin
       • 7 packages installed in total
         • webpack
           • the webpack build tool
         • webpack-cli
           • webpack's command-line tool
         • webpack-dev-server
           • webpack's development server
         • typescript
           • the ts compiler
         • ts-loader
           • the ts loader, used to compile ts files inside webpack
         • html-webpack-plugin
           • the html plugin for webpack, used to create html files automatically
         • clean-webpack-plugin
           • the clean plugin for webpack, it wipes the directory before every build

  3. Create webpack's config file, webpack.config.js, in the root directory

     • const path = require("path");
       const HtmlWebpackPlugin = require("html-webpack-plugin");
       const { CleanWebpackPlugin } = require("clean-webpack-plugin");
       
       module.exports = {
          optimization:{
              minimize: false // turn off code minification, optional
          },
       
          entry: "./src/index.ts",
       
          devtool: "inline-source-map",
       
          devServer: {
              contentBase: './dist'
          },
       
          output: {
              path: path.resolve(__dirname, "dist"),
              filename: "bundle.js",
              environment: {
                  arrowFunction: false // turn off webpack's arrow functions, optional
              }
          },
       
          resolve: {
              extensions: [".ts", ".js"]
          },
       
          module: {
              rules: [
                  {
                      test: /\.ts$/,
                      use: {
                         loader: "ts-loader"     
                      },
                      exclude: /node_modules/
                  }
              ]
          },
       
          plugins: [
              new CleanWebpackPlugin(),
              new HtmlWebpackPlugin({
                  title:'TS test'
              }),
          ]
       
       }

  4. Create tsconfig.json in the root directory, configure it however you need

     • {
          "compilerOptions": {
              "target": "ES2015",
              "module": "ES2015",
              "strict": true
          }
       }

  5. Edit package.json and add the following config

     • {
        ...
        "scripts": {
          "test": "echo \"Error: no test specified\" && exit 1",
          "build": "webpack",
          "start": "webpack serve --open chrome.exe"
        },
        ...
       }

  6. Create a ts file under src, then run npm run build on the command line to compile the code, or run npm start to start the dev server

2. Babel

• After that round of configuration TS and webpack are already wired together. Besides webpack, development work often also wants babel to transform the code so it works in more browsers; building on the steps above, bring babel into the project like this.

  1. Install the dependency packages:

     • npm i -D @babel/core @babel/preset-env babel-loader core-js
     • 4 packages installed in total, namely:
       • @babel/core
         • babel's core tool
       • @babel/preset-env
         • babel's predefined environments
       • @babel-loader
         • babel's loader inside webpack
       • core-js
         • core-js is what lets older browsers support the newer ES syntax

  2. Modify the webpack.config.js config file

     • ...
       module: {
          rules: [
              {
                  test: /\.ts$/,
                  use: [
                      {
                          loader: "babel-loader",
                          options:{
                              presets: [
                                  [
                                      "@babel/preset-env",
                                      {
                                          "targets":{
                                              "chrome": "58",
                                              "ie": "11"
                                          },
                                          "corejs":"3",
                                          "useBuiltIns": "usage"
                                      }
                                  ]
                              ]
                          }
                      },
                      {
                          loader: "ts-loader",
       
                      }
                  ],
                  exclude: /node_modules/
              }
          ]
       }
       ...

     • That way, the files compiled by ts get processed by babel once more, so the code can be used directly in most browsers; you can pick the browser versions to support in the targets option of the config.

Important

This article was translated by Hermes Agent; the original text can be found at here. The translation is for reference only. Translation time: 2026-11-05