13、Webpack：JavaScript与TypeScript项目的高效打包工具

Webpack：JavaScript与TypeScript项目的高效打包工具

在现代的前端开发中，将多个文件打包成一个文件可以显著提升性能和下载速度。本文将详细介绍如何使用Webpack这个强大的打包工具，分别对JavaScript和TypeScript项目进行打包。

1. Webpack简介

Webpack是为运行在浏览器中的Web应用程序而创建的，它支持许多典型的Web应用构建任务，且配置简单。你可以选择全局或本地安装Webpack及其命令行界面（CLI）工具webpack-cli。

全局安装命令如下：

npm install webpack webpack-cli -g

不过，考虑到生产环境可能存在软件安装限制，本文将使用本地安装的Webpack和Webpack CLI。

2. 使用Webpack打包JavaScript项目

以下是使用Webpack打包一个简单JavaScript项目的步骤：
1. 项目初始化 ：选择名为 webpack-javascript 的项目，运行以下命令安装依赖：

npm install

2. 项目配置 ：该项目的 package.json 文件如下：