使用Webpack打包 ts代码
step1:先建一个项目
step2:通过npm init -y 来对项目进行初始化,最终会得到一个package.json的文件,这个文件主要用来管理项目
step3:通过执行cnpm i -D webpack webpack-cli typescript ts-loader安装开发时的依赖、ts的核心包以及一个ts的loader
step4:新建一个文件夹,自己手动输入: webpack.config.js这个是配置文件
step5:然后在这个配置文件中配置相关的信息
配置信息
// 引入一个包,path模块用于处理文件和目录的路径,在使用的时候仅需要引用一下即可
const path = require('path');
// webpack的所有配置信息都应该写在module.exports中
module.exports = {
// 指定入口文件 index.ts是项目的入口文件
entry: "./src/index.ts",
//指定打包文件所在目录
output: {
// --direname 是一个成员,用于动态获取当前文件模块所属的绝对路径
// path.resolve() 相当于在当前文件夹下拼接了一个文件路径
path: path.resolve(__dirname, 'dist');
// 打包后文件的文件
filename: "bundle.js"
},
// 指定webpack打包时要使用的模块
module: {
// 指定要加载的规则
rules: [
{
// test 是指定规则生效的文件,意思就是用ts-loader来处理以.ts结尾的文件
test: /\.ts$/,
use: 'ts-loader',
// 排除不需要用ts-loader处理的文件
exclude: /node-modules/
}
]
}
}
上面是webpack的配置,还需要对ts进行配置,需要指定ts的编译规范
step1: 在根目录下新建tsconfig.json
会自动生成一些内容,然后修改如下,可以使用es5的标准
step2:为了让webpack打包成功,还需要在package.json中增加指令
step3:最后在终端输入 npm run build 来执行webpack对项目进行打包