webpack结合ts使用
1.初始化webpack， npm init -y 生成package.json 文件
自己加一个打包命令 "build": "webpack"
{
"name": "webpack-ts",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"ts-loader": "^9.3.0",
"typescript": "^4.7.3",
"webpack": "^5.73.0",
"webpack-cli": "^4.10.0"
}
}
2.安装开发依赖 npm i -D webpack webpack-cli typescript ts-loader
3.自己创建配置文件webpack.config.js
// 引入path包,作用是拼接路径
const path = require('path')
// webpack的所有配置信息都在这里
module.exports = {
// 指定入口文件
entry:'./src/index.ts',
// 指定打包后文件的目录
output:{
// 指定打包文件的目录
path:path.resolve(__dirname,'dist')
// 打包的文件名
filename:'bundle.js'
},
// webpack 打包时要依赖的一些模块
module:{
// 指定加载规则
rules:[
{
// test指定规则生效的文件
test:/\.ts$/, // ts结尾
use:'ts-loader', // 用ts-loader去处理
exclude:/mode-modules/ // 排除文件，这里的不去编译
}
]
}
}
4.创建tsconfig配置文件，这个相关配置在上个文章中已经介绍过了，我们只简单选择三项，开启严格模式。
5.都配置好以后，再编译ts 就可以直接使用 npm run bulid 去编译了。
如此就搭建好了最简单的webpack + typescript了！可以愉快的开发了。
推荐阅读
您阅读本篇文章共花了：
发表评论