文章目录
前言
针对 ts 不借助框架的情况,使用 webpack 打包 ts
一、新建一个目录,作为项目文件夹
二、安装typescript,如果已经安装就跳过
1.查看是否安装
tsc -v
2.如果未安装,建议全局安装
npm install -g typescript
三、 初始化项目、生成tsconfig.json,确保在项目根目录下
1. 初始化项目
npm init -y
2. 生成tsconfig.json
tsc --init
看到目录下存在了 tsconfig.json,打开基本修改一下
// 这默认是注释了,可以打开
"moduleResolution": "node"
其他的选择默认即可,我们的这个小目标只是让项目运行起来
四、安装 webpack,webpack 不需要全局安装
npm install --save-dev webpack webpack-cli
五、安装 ts-loader,webpack只对js有效,因此我们需要把ts转化为js,需要用到该包
npm install --save-dev ts-loader
六、配置webpack
完成上述一系列,我们需要配置webpack让它为我们工作了。
七、在根目录,项目根下面新建文件webpack.config.js, 启动webpack对时候回去执行
⚠ 注意: 打包的入口文件 entry
const path = require('path'); // node自带包
module.exports = {
entry:'./modules.ts', // 打包对入口文件,期望打包对文件入口
output:{
filename:'test.js', // 输出文件名称
path:path.resolve(__dirname,'dist') //获取输出路径
},
mode: 'development', // 整个mode 可以不要,模式是生产坏境就是压缩好对,这里配置开发坏境方便看生成对代码
module:{
rules: [{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}]
},
resolve: {
extensions: ['.ts'] // 解析对文件格式
},
}
八、修改 package.json
webpack 配置文件处理好之后还不能友好的打包,要修改packge.json 文件,用脚步打包 scripts 这一段
"scripts": {
"test": "webpack" // test 可以换成自己喜欢的比如build 等等
},
test 可以换成自己喜欢的比如build 等等,这样配置后 webpack 就会自动去找到,webpack.config.js 然后开始工作
九、运行
npm run test
⚠ 提示: 如果想简单运行,可自建 html 文件引入生成的 test.js,打开 html 文件