使用webpack打包nestjs项目


前言

在编写nestjs项目的时候,很操蛋的事情就是使用nestjs打包完毕的项目,每次部署都得拷贝一堆文件夹,这堆文件夹在项目运行的时候随着项目体积的增大,编译后的启动速度也开始慢的要死,并且上传的时候也是非常难受。
在这里插入图片描述
在外面使用webpack打包过后,我们的项目只剩下这点东西
在这里插入图片描述
并且编译后的这个文件运行速度缩短了一大截,项目启动速度极快,项目启动速度从11秒提升到了3秒。。


配置文件

先放上配置文件吧,记得把入口和出口修改一下

const path = require('path')
const nodeExternals = require('webpack-node-externals')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin');
const tsConfigFile = 'tsconfig.build.json'
/**
 * @type {import('webpack').Configuration}
 */
module.exports = {
  mode: 'production',
  target: 'node',
  entry: path.resolve(__dirname, 'src', 'main.ts') // 入口文件。改成你自己的,
  output: {
    path: path.resolve(__dirname, 'dist') // 出口文件,如果没什么特殊的就可以不管,
    filename: 'index.js'
  },
  // 忽略依赖
  externals: [nodeExternals()],
  plugins: [
    new CleanWebpackPlugin()
  ],
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader'
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
    plugins: [
    // 别名路径处理
      new TsconfigPathsPlugin({
        configFile: tsConfigFile,
      }),
    ],
  },
}

说明

  打包的时候,由于nestjs的依赖庞大且繁琐,所以我们很难把所有依赖打包到同一个js文件中,所以我们需要采取依赖剥离的一个操作。
所以我们使用了一个webpack的plugin,这个plugin名为:webpack-node-externals,这个插件就是把项目所需的依赖在打包的时候剔除掉,但是会留校引入的代码。所以我们打包后的项目需要把依赖放在一起才可以正常运行起来项目。
  并且打包过程中,我们也需要对tsconfig中的path进行路径处理,因为我们引入文件的方式是使用别名路径去引入的。
在这里插入图片描述
  虽然webpack也提供了别名路径,但两者会冲突,所以我们使用了tsconfig-paths-webpack-plugin这个插件进行了路径处理。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小蓝阿姨

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值