目标：

  • 可应用 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 的值，而后保留，可看到浏览器的页面会主动刷新