使用webpack 打包 typescript node 后台项目

2021-1-7 18:36:05
学习记录
181

使用webpack 打包 typescript node 后台项目

后台使用 typescript 开发,本地部署使用 ts-node + nodemon 实现直接运行 ts 代码+自动重启程序

遇到的问题

​ 但是开发一时爽,项目部署时候,发现如果只使用 tsc 构建项目的话,tsc 只会对 ts 代码进行编译,不会压缩整合其他代码,并且不支持 alise 导致 , 导致 tsconfig 中 path 字段失效

优化方法

​ 使用 webpack + babel-loader + @babel/preset-typescript 实现 ts代码编译,配合其他插件,如 webpack-node-externals 等,可以排除 node_module

注意使用webpack 打包node项目时候,target 需要 设置 'node’

大致配置:

node: { console: true, process: true, __filename: true, // __dirname: true, path: true }, target: 'node', externals: [nodeExternals()], entry: './src/server.ts', output: { filename: 'app.js', path: path.resolve(__dirname, './dist') }, resolve: { extensions: ['.ts', '.js'] }, module: { rules: [ { test: /\.ts$/, exclude: /node_modules/, loader: 'babel-loader', options: { presets: [ [ '@babel/preset-env', { corejs: '3', useBuiltIns: 'usage' } ], '@babel/preset-typescript' ] } } ] }, plugins: [copyAssets()] }

使用webpack 打包 typescript node 后台项目

avatar

Sky(小新)

个人签名: 提升能力,创造价值!

江苏-南京
skylpz@qq.com