13、Webpack 打包：JavaScript 与 TypeScript 的高效实践

Webpack 打包：JavaScript 与 TypeScript 的高效实践

1. 打包的重要性与 Webpack 简介

在开发过程中，将多个文件打包成一个文件可以提升性能并加快下载速度。虽然技术上可以在 tsconfig.json 中指定一个输出文件，让 tsc 将多个 .ts 文件的生成代码放入单个输出文件，但这仅在编译器的模块选项为 System 或 AMD 时有效，并且打包器生成的输出文件不会包含像 JavaScript 库这样的第三方依赖。

同时，我们希望能够对开发和生产构建进行不同的配置。在生产环境中，需要添加优化和压缩，而在开发环境中，只需将文件打包在一起。

几年前，JavaScript 开发者大多使用像 Grunt 和 Gulp 这样的通用任务运行器来编排构建过程。如今，他们使用 Webpack、Rollup 和 Browserify 等打包器。借助插件，打包器在需要时还可以充当编译器。

Webpack 是为在浏览器中运行的 Web 应用程序而创建的，它支持许多准备 Web 应用程序构建所需的典型任务，并且只需要最少的配置。可以全局或本地（在项目的 node_modules 子目录中）安装 Webpack。Webpack 还有一个命令行界面（CLI）工具 webpack-cli 。在 Webpack 4 之前，正确配置一个 Webpack 项目并不容易，但 webpack-cli 脚手架工具大大简化了 W