Webpack搭建简单的TypeScript脚手架
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')
}
}初次测试
编写一下index.js文件，测试一下前面的配置是否正确。
console.log('赤蓝紫')执行命令npx webpack
执行编译生成的文件，能得到正确的结果就表示前面的步骤正确了。
生成html
上面我们已经能够使用Webpack编译打包js代码了，但是生成的是js文件，还得去执行它。所以接下来我们需要能够开启一个服务。开启服务之前得先让它能够生成html文件。
- 安装依赖
npm install html-webpack-plugin - 修改配置，引入并使用插件
- 执行
npx webpack
开启服务器
- 安装
webpack-dev-server：npm install webpack-dev-server - 执行
npx webpack serve - 打开http://localhost:8080/
处理TS文件
现在我们的脚手架还是不能处理TS文件的。
index.js
import './myts.ts'myts.ts
let age: number = 21
console.log(age)
处理TS文件其实也不难，只需要两个步骤就行：
安装ts-loader，npm install ts-loader
修改Webpack配置文件webpack.config.js，增加module节点
module: {
rules: [
{
// ts后缀名的文件会使用ts-loader
test: /\.ts$/,
use: ["ts-loader"]
}
]
}增加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"]
}
]
}
}腾讯云开发者
