使用webpack打包nestjs项目

文章目录

  • 前言
  • 配置文件
  • 说明


前言

在编写nestjs项目的时候,很操蛋的事情就是使用nestjs打包完毕的项目,每次部署都得拷贝一堆文件夹,这堆文件夹在项目运行的时候随着项目体积的增大,编译后的启动速度也开始慢的要死,并且上传的时候也是非常难受。
使用webpack打包nestjs项目_第1张图片
在外面使用webpack打包过后,我们的项目只剩下这点东西
使用webpack打包nestjs项目_第2张图片
并且编译后的这个文件运行速度缩短了一大截,项目启动速度极快,项目启动速度从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打包nestjs项目_第3张图片
  虽然webpack也提供了别名路径,但两者会冲突,所以我们使用了tsconfig-paths-webpack-plugin这个插件进行了路径处理。

你可能感兴趣的:(webpack,webpack,javascript,typescript,node.js)