应用typescript与webpack搭建开发环境

我的项目初始化

$ yarn init -y

本文全副应用yarn命令，没有装置的能够执行上面应用npm装置

$ npm i -g yarn

装置依赖

将下面内容拷贝到我的项目中的package.json文件中，执行装置命令

$ yarn install

$ tsc --init

如果呈现tsc不是失常的命令谬误提醒可在命令后面增加npx 而后在执行
执行胜利之后批改tsconfig,写入以下内容

更多配置选项可参考官网文档

在我的项目根目录下减少webpack.config.js,内容如下

更多配置选项可参考官网文档
到这里我的项目的配置项根本曾经全副实现了，上面开始写代码

在我的项目目录减少src文件夹，并创立第一个文件index.ts,内容如下

实现之后运行一下我的项目，验证一下

我的项目启动有两种形式，一种是间接在终端中输出webpack serve来启动或者应用yarn命令启动，咱们应用第二种形式。
首先配置yarn的启动脚本

在package.json中减少以下代码

  "scripts": {    "start": "webpack serve"  }

上面咱们就能够在终端中间接输出yarn start来启动我的项目了，执行之后会看到以下提醒

我的项目顺利启动，并在本地启动了一个端口为8080的服务,咱们能够间接在浏览器中那个拜访

http://localhost:8080/

获取源码点击这里