TypeScript 文件的热更新打包构建详解

2023-12-11 13:22:06

热更新，是指 Hot Module Replacement，缩写为 HMR。模块热替换是 webpack 提供的最有用的功能之一 ，它使你可以在不重新加载整个页面或应用程序的情况下，更新应用程序中的单个模块。这对于快速开发和测试应用程序非常有用，因为你可以立即看到对代码所做的更改。

在本文中，我们将学习如何使用 webpack 5 实现 TypeScript 文件的热更新打包。

前提条件

Node.js 版本 >= 10
TypeScript 版本 >= 3.8
webpack 版本 >= 5.0
npm 或 yarn 包管理器

步骤

1. 创建项目

mkdir my-typescript-project
cd my-typescript-project
npm init -y

2. 安装必要的依赖

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

3. 创建 TypeScript 配置文件

touch tsconfig.json

并添加以下配置：

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

4. 创建入口文件

touch src/index.ts

并添加以下代码：

console.log('Hello, World!');

5. 创建 webpack 配置文件

touch webpack.config.js

并添加以下配置：

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.ts',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader'
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.js']
  },
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist')
    },
    hot: true
  }
};