从零开始搭建 TS + webpack-dev-server 的开发环境

目的：

• 可使用 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 的值，然后保存，可看到浏览器的页面会自动刷新