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

目标：

可应用 TypeScript 来开发我的项目

联合 webpack-dev-server 的热重载，晋升开发效率

理解相干依赖和配置的作用

一、初始我的项目目录构造（非常简单）

|_ src
|   |_ index.ts
|_ public
    |_ index.html（只需在 body 标签中增加 <script src="./index.js"></script>）

转为 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 即可看到后果

装置根底依赖：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 的值，而后保留，可看到浏览器的页面会主动刷新

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

筹备

二、降级为 TS 环境

步骤：

验证

三、增加 webpack 性能

步骤一：

步骤二：

验证