webpack 之 typescript 打包学习基础 1

简述

本文只是为了快速学习typescript 而建立的webpack初级打包，目的是为ts更好的运行起来，特别是ts的模块部分，需要放到不同的环境，也就是需要经过 编译才能在浏览器运行，看到效果，因此
不涉及

• tsconfig.json 配置
• webpack 生产环境配置
• 除了webpack 不涉及其他的插件
• 不使用ts的模版语法

顺便了解webpack最基础的配置，同样一步一步来

搭建

项目开始不管是测试还是开发我们都需要一个目录管理

新建目录

这个就不说了，我的是basic目录。

安装 typescript

如果已经安装就跳过
查看是否安装

tsc -v
Version 3.7.2

如果未安装就安装,建议全局安装

npm instal -g typescript 

初始化项目 生成 tsconfig.json，

确保在新建目录下，我的是basic，执行

npm init -y

看到目录下存在了 tsconfig.json；打开基本修改一下

"moduleResolution": "node",  // 这默认是注释了，可以打开，

其他的选择默认即可，我们的这个小目标只是让项目运行起来

安装webpack

webpack不需要全局安装

npm install --save-dev webpack webpack-cli

安装 ts-loader

webpack只对js有效，因此我们需要把ts转化为js，需要用到该包

npm install --save-dev ts-loader

配置webpack

完成上述一系列，我们需要配置webpack让它为我们工作了。
在根目录，basic 下面新建文件webpack.config.js， 启动webpack对时候回去执行

const path = require