Webpack搭建简单的TypeScript脚手架

前言

这里的脚手架只是指能更方便学习TypeScript的基础工具
简单入门了一下Typescript(可能还没入门)，学习TypeScript并不能直接运行查看结果，需要tsc xxx.ts将TS编译出JS才能执行，这样子很明显不是很方便。

虽然我们也可以在TypeScript中文网的练习平台写，直接看对比编译出来的JS代码，但是实际看代码运行结果还是需要点击运行按钮，去到新页面，再打开控制台。

所以为了很方便地学习TS，搭建一个简单的TypeScript脚手架很有必要

步骤

项目初始化

npm init -y：对项目进行初始化操作对包进行管理。(会生成默认的package.json文件)

添加src目录，后续的代码在src目录下进行编写

安装webpack

npm install webpack webpack-cli

添加Webpack配置文件webpack.config.js，设置入口文件、出口文件地址。

const path = require('path')

module.exports = {
    // 开发模式
    mode: 'development',

    // 入口文件是src目录下的`index.js`文件
    entry: path.join(__dirname, 'src', 'index.js'),
    
     
    output: {
        // 把所有依赖的模块合并输出到一个 index.js 文件
        filename: 'index.js',

        // 输出文件都放到 dist 目录下
        path: path.join(__dirname, 'dist')
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

初次测试

编写一下index.js文件，测试一下前面的配置是否正确。

console.log('赤蓝紫')
1

执行命令npx webpack

执行编译生成的文件，能得到正确的结果就表示前面的步骤正确了。

生成html

上面我们已经能够使用Webpack编译打包js代码了，但是生成的是js文件，还得去执行它。所以接下来我们需要能够开启一个服务。开启服务之前得先让它能够生成html文件。

1. 安装依赖
   npm install html-webpack-plugin

2. 修改配置，引入并使用插件
   

3. 执行npx webpack
   

开启服务器

1. 安装webpack-dev-server：npm install webpack-dev-server
2. 执行npx webpack serve
3. 打开http://localhost:8080/

处理TS文件

现在我们的脚手架还是不能处理TS文件的。

index.js

import './myts.ts'
1

myts.ts

let age: number = 21
console.log(age)
1
2

处理TS文件其实也不难，只需要两个步骤就行：

1. 安装ts-loader，npm install ts-loader
2. 修改Webpack配置文件webpack.config.js，增加module节点

module: {
    rules: [
        {
            // ts后缀名的文件会使用ts-loader
            test: /\.ts$/,
            use: ["ts-loader"]
        }
    ]
}
1
2
3
4
5
6
7
8
9

3. 增加TS配置文件，空文件也行，只是一定要有

再次执行npx webpack serve

然后，还可稍微修改一下package.json文件，设置npx webpack serve命令为更常用的npm run dev

简单的TS脚手架这样子就结束了。之后就能更方便的学习TS了。

完整版Webpack配置献上：

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
    mode: "development",
    entry: path.join(__dirname, "src", "index.js"),
    output: {
        filename: "index.js",
        path: path.join(__dirname, "dist")
    },
    plugins: [new HtmlWebpackPlugin()],
    module: {
        rules: [
            {
                // ts后缀名的文件会使用ts-loader
                test: /\.ts$/,
                use: ["ts-loader"]
            }
        ]
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21