目的：

• 可使用 TypeScript 來開發項目
• 結合 webpack-dev-server 的熱重載，提升開發效率
• 瞭解相關依賴和配置的作用

準備

一、初始項目目錄結構（非常簡單）

|_ src
|   |_ index.ts
|_ public
    |_ index.html（只需在body標籤中添加<script src="./index.js"></script>）

二、升級為 TS 環境

步驟：

• 轉為npm項目：npm init -y （省去不斷按 Y 的功夫）
• 安裝依賴：npm i typescript -D
• 添加tsconfig.json：tsc --init

最終項目目錄結構

|_ src
|   |_ index.ts
|_ public
|   |_ index.html
|_ tsconfig.json
|_ package.json

驗證

• 修改 tsconfig.json，將編譯後的文件輸出到 public 目錄：

  {
    ...
    "compilerOptions": {
        "outDir": "./public"
    }
    ...
  }

• 編輯 ./src/index.ts

  const msg: string = 'ts'
  function getMsg() {
  return 'Hello, ' + msg
  }
  // 更新頁面的內容
  document.body.textContent = getMsg()

• 在終端執行：tsc，然後在瀏覽器中打開 public/index.html 即可看到結果

三、添加 webpack 功能

步驟一：

• 安裝基礎依賴：npm i webpack webpack-cli webpack-dev-server -D

  • webpack：核心依賴，功能不贅
  • webpack-cli：用於在命令行中運行 webpack
  • webpack-dev-server：為webpack打包生成的資源文件提供web服務，支持 熱重載

• 添加必要目錄/文件：

  • 在根目錄下添加配置文件 webpack.config.json
  • 在根目錄下添加發布目錄 dist

• 安裝其他依賴：ts-loader html-webpack-plugin cross-env -D

  • ts-loader：webpack 的 ts 加載器，編譯 ts 文件
  • html-webpack-plugin：webpack 的 html 插件，可使用模板 html 生成最終 html
  • cross-env：方便切換開發和生產環境

最終項目目錄結構：

|_ src
|   |_ index.ts
|_ dist
|_ public
|   |_ index.html
|_ tsconfig.json
|_ package.json
|_ webpack.config.json

步驟二：

• 編輯 webpack.config.json ：

  const HtmlWebpackPlugin = require('html-webpack-plugin')
  
  module.exports = {
    // resolve：設置模塊如何被解析
    resolve: {
      // extensions：引入模塊時不帶擴展
      // 原來：import File from '../path/to/file.js'
      // 現在：import File from '../path/to/file'
      extensions: ['.js', '.ts', '.tsx'],
    },
    // module：決定了如何處理不同類型的模塊
    module: {
      // rules：創建模塊時，匹配請求的規則數組
      rules: [
        {
          // 匹配所有 ts 文件
          test: /\.tsx?$/i,
          // 使用 ts-loader 來處理
          use: 'ts-loader',
          // 排除這個目錄下的
          exclude: /node_modules/,
        },
      ],
    },
    // plugins：用於以各種方式自定義構建過程
    plugins: [
      // 使用目標模板來生成最終 html
      new HtmlWebpackPlugin({
        template: './public/index.html',
      }),
    ],
  }
  

• 編輯 public/index.html，將 script 標籤去掉，因為 webpack 構建時會自動插入相關標籤

• 在 package.json 中添加啓動服務的腳本：

  {
    ...
    "script": {
        "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
    }
    ...
  }
  

驗證

• 在終端中執行：num run dev，啓動服務
• 瀏覽器打開：127.0.0.1:8080，即可看到頁面
• 修改 ./src/index.ts 中 msg 的值，然後保存，可看到瀏覽器的頁面會自動刷新