Teach you how to use webpack to package and compile TypeScript code

TypeScript Bundling

webpack integration

Usually, in actual development, we need to use build tools to package the code;

TS can also be used in conjunction with build tools. The following uses webpack as an example to introduce how to use TS in conjunction with build tools.

Here are the steps:

Initialize the project

Enter the project root directory and execute the command npm init -y to create a package.json file

Download the build tools

The command is as follows:

npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin

A total of 7 packages were installed:

• webpack: build tool webpack
• webpack-cli: command line tool for webpack
• webpack-dev-server: webpack development server
• Typescript: ts-compiler
• ts-loader: ts loader, used to compile ts files in webpack
• html-webpack-plugin: html plugin in webpack, used to automatically create html files
• clean-webpack-plugin: A cleanup plugin in webpack that will clean the directory before each build

Configure webpack

Create the webpack configuration 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 compression, 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 function, optional}
   },

   resolve: {
       extensions: [".ts", ".js"]
   },

   module: {
       rules:
           {
               test: /\.ts$/,
               use: {
                   loader: "ts-loader"     
               },
               exclude: /node_modules/
           }
       ]
   },

   plugins: [
       new CleanWebpackPlugin(),
       new HtmlWebpackPlugin({
           title:'TS test'
       }),
   ]
}

Configure TS compilation options

Create tsconfig.json in the root directory and configure it according to your needs

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

Modify package.json configuration

Modify package.json and add the following configuration

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

Project Usage

Create a ts file under src and execute npm run build in the command line to compile the code;

Or execute npm start to start the development server;

Babel

In addition to webpack, babel is often needed to convert code during development;

In order to make it compatible with more browsers, based on the above steps, introduce babel into the project through the following steps;

Although TS also supports code conversion during compilation, it only supports simple code conversion;

For ES6 features such as Promise, TS cannot be converted directly, so babel is needed for conversion;

Install dependency packages:

npm i -D @babel/core @babel/preset-env babel-loader core-js

A total of 4 packages were installed, namely:

• @babel/core: Babel's core tools
• @babel/preset-env: Babel's predefined environment
• @babel-loader: babel loader in webpack
• core-js: core-js is used to enable older browsers to support the new ES syntax

Modify the webpack.config.js configuration 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/
        }
    ]
}

In this way, the files compiled with ts will be processed by babel again;

Make the code directly usable in most browsers;

You can also specify the browser versions to be compatible in the targets configuration options;

This is the end of this article about using webpack to package and compile TypeScript code. For more relevant webpack packaging and compiling TypeScript content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!