Webpack搭建简单的TypeScript脚手架
source link: https://www.clzczh.top/2022/06/18/webpack-build-typescript/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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"]
}
]
}
}
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK