TypesScript+Webpack

1, npm init -y初始化一个package.json

2, tsc --init 初始化一个sconfig.json

3，安装WebPack

使用常见的WebPack，让TS工程跑起来。

先按照3个包，webpack,webpack-cli,webpack-dev-server。

配置webpack时候区分开发环境和生产环境，为了工程的可维护性，可以把开发环境的配置，生产环境的配置和公共配置分开写，通过插件合并。

npm i webpack webpack-cli webpack-dev-server -D

 把配置文件都放在build里。

 

4，按照ts-loader

需要本地再安装一遍typescript

npm i ts-loader typescript -D

 ts-loader是webpack的插件，使用的就是tsconfig.json配置，而tsc是一个命令行，当tsc中指定了某个文件时，会忽略tsconfig.json配置。

5,安装HtmlWebpackPlugin

npm i html-webpack-plugin -D

通过一个模板帮助我们生成网站的首页，把输出文件自动嵌入到文件中

 

 

6,安装插件CleanWebpackPlugin

npm i clean-webpack-plugin -D

每次成功构建之后帮助我们清空dist目录

 

 

7，webpack.config.js

安装webpack-merge插件把两个配置文件合并。

npm i webpack-merge -D