在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

nestjs/nest

菜单

Webpack 集成

相关源文件

目的与范围

本文档详细介绍了 Webpack 与 NestJS 应用程序的集成。Webpack 支持打包 JavaScript/TypeScript 应用程序，并提供诸如热模块替换 (HMR) 等功能，以增强开发体验。这种集成可以实现更高效的构建、改进的开发工作流程和优化的生产部署。

有关 Babel 集成的信息，请参阅Babel 集成。

概述

Webpack 集成在 NestJS 中提供了几个关键优势

  1. 应用程序打包 - 减少了需要部署的文件数量
  2. 热模块替换 (HMR) - 无需完全重启服务器即可更新模块
  3. 开发优化 - 在开发过程中加快重新构建速度
  4. 生产优化 - 更小、更高效的包

来源： sample/08-webpack/package.json7-9

设置 Webpack 集成

安装

要将 Webpack 与 NestJS 结合使用，您需要安装以下依赖项

所需的关键包

包目的
webpack核心 Webpack 功能
webpack-cliWebpack 的命令行界面
webpack-node-externals从包中排除 node_modules
ts-loaderWebpack 的 TypeScript 加载器
start-server-webpack-pluginHMR 的服务器重启功能

来源： sample/08-webpack/package.json31-36

配置

NestJS CLI 通过命令行标志提供对 Webpack 的内置支持

来源： sample/08-webpack/package.json8

热模块替换（HMR）

什么是 HMR？

热模块替换允许在运行时更新模块，而无需完全重新启动服务器，这通过以下方式显著改善了开发体验：

  1. 在更新期间保留应用程序状态
  2. 通过更快的更新缩短开发时间
  3. 在应用更改时保持应用程序运行

在 NestJS 中实现 HMR

要在 NestJS 应用程序中启用 HMR，您需要

  1. 一个自定义的 Webpack 配置文件（例如，webpack-hmr.config.js）
  2. 更新主应用程序文件以接受 HMR
  3. 一个使用自定义 Webpack 配置的构建脚本

来源： sample/08-webpack/package.json8

自定义 Webpack 配置

NestJS 允许完全自定义 Webpack 配置。典型的 HMR Webpack 配置文件包括

  1. Node 外部依赖配置，用于排除依赖项
  2. HMR 特定的插件和设置
  3. 入口点配置，以包含 HMR 功能

使用--webpackPath标志指定自定义 Webpack 配置

来源： sample/08-webpack/package.json8

CLI 集成

NestJS CLI 通过几个标志提供与 Webpack 的无缝集成

标志描述
--webpack启用 webpack 打包
--webpackPath指定自定义 Webpack 配置文件
--watch启用开发监视模式

示例

  1. 使用 HMR 进行开发:

  2. 使用 Webpack 进行生产构建:

来源： sample/08-webpack/package.json8

Webpack 与标准 TypeScript 编译

NestJS 同时提供标准 TypeScript 编译和 Webpack 打包

来源： sample/08-webpack/package.json7-9

最佳实践

开发工作流

  1. 在开发中使用 HMR:

    • 创建自定义 webpack-hmr.config.js
    • 使用带有 HMR 标志的build:dev脚本

  2. 脚本配置:

    • 在 package.json 中为不同的构建场景添加专用脚本

    示例

  3. 生产版本:

    • 考虑为生产环境使用单独的 Webpack 配置以进行优化

来源： sample/08-webpack/package.json6-13

常见问题和故障排除

  1. HMR 无法正常工作:

    • 确保 main.ts 已正确配置 HMR
    • 检查 Webpack 配置中的 HMR 插件

  2. 构建缓慢:

    • 使用 webpack-node-externals 排除 node_modules
    • 考虑更细粒度的监视配置

  3. 依赖项问题:

    • 确保所有与 Webpack 相关的依赖项版本兼容

结论

Webpack 集成为 NestJS 应用程序提供了强大的打包功能和开发工作流程改进。通过利用 HMR 等功能，开发人员可以显著提高其生产力，同时仍能为生产环境生成优化的构建。

示例中展示的核心设置演示了通过 CLI 标志和自定义配置文件将 Webpack 集成到 NestJS 中是多么容易，使其成为任何 NestJS 开发工作流程的宝贵补充。