webpack配置typescript详解

随着现在typescript使用越来越多，作为打包工具界的webpack怎么编译typescript呢？

下面我把自己的实践记录一下，成功编译了typescript文件，并且引入typescript模块后，也可以成功编译。

我们从新建webpack项目开始，在此之前先贴一下环境，经常环境不同会造成不同的状况，这边先贴上的环境：

$ node -v 
v14.15.4

$ npm -v 
6.14.10

$ webpack -v 
webpack: 5.58.2
webpack-cli: 4.9.0
webpack-dev-server 4.3.1

打包typescript文件

**1）**新建项目

$ npm init -y

**2）**安装webpack和webpack-cli

webpack是其中的核心，webpack-cli是命令行工具。

$ npm i -D webpack webpack-cli

**3）**安装typescript和ts-loader

typescript就是语言编译器，这个就不用多解释了。

ts-loader就是webpack在打包typescript文件的时候用来解析用的，这个就是其中结合的关键了。webpack其实就是通过各种loader打包不同的文件。

$ npm i -D typescript ts-loader

其中：

i 表示install，安装的意思。
-D 表示增加到package.json中devDependencies。

这步完成后，我的package.json文件如下：

{
   
   
  "name": "04_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
   
   
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords"