关于前端:从零开始搭建-TS-webpackdevserver-的开发环境

目标：

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