Webpack搭建完整Typescript开发环境

前言

IDE提供了强大的纠错与补全能力，但是对于从开发时的编程语言实时转译，提供开发本地服务器以及自动刷新，到转为生产环境代码的编译，压缩，混淆代码以及打包，还是交给一些第三方工具的吧，对，我说的就是Typescript代替Javascript进行前端开发，第三方工具就说的是神器webpack。

在此记录一下，下一次直接复制粘贴 :-p

---

需求

开发环境

• 即时编译为js，并自动刷新页面

生产环境

• 将es6/es7转为es5
• 混淆并压缩转译完的js代码

---

环境搭建

cd  <your-dev-dir>

npm init

目录如下

<your-dev-dir>
├── dist              // 生产环境的js代码输出文件夹
│   └── index.html   // html 页面
├── .babelrc          // babel 配置文件
├── package-lock.json
├── package.json
├── src
│   └── typescript
│       ├── main.ts         // typescript入口文件
│       ├── .......         // 其他ts文件或模块
├── tsconfig.json        // typescript配置文件，IDE会读取
├── webpack.common.js    // wepack通用配置文件
├── webpack.dev.js       // webpack开发环境配置文件
└── webpack.prod.js      // webpack生产环境配置文件

---

安装依赖

npm install --save-dev babel babel-loader babel-polyfill babel-preset-env ts-loader typescript uglif