简而言之，webpack是一个开源的JavaScript模块打包器。在github上有超过60k星量，它是这个领域的领导者。
Webpack允许你在开发中将JavaScript拆分为单独的模块（更好的维护），同时让你在生产中将这些模块编译成单个包（更好的提高性能）。
从历史上看，很多新手或者经验不足的开发者由于webpack的复杂性而避开了webpack，这在某种程度上可能是真的，但webpack继续接收定期更新，并在每个版本中变得更好。webpack团队在2020年10月发布了5.0.0版本，此后进行了多次增量更新。
值得注意的是，webpack 4.0.0是第一个不需要webpack.config.js文件来打包项目的版本。仅就这一项就是的新开发人员更容易的使用它。
安装 webpack 5 需要 Node 10.13.0 或更高版本的Node，所以如果你有一段时间没有更新Node的话，你必须在安装webpack之前更新下Node。
webpack 文档强烈建议在本地安装 webpack，而不是全局安装。这也就意味着你在每个项目中要单独安装它，而不是在每个项目中使用一个全局安装。通过单独的本地安装，也可以根据需要升级（或不升级）每个安装。
跟随本webpack教程，创建一个项目目录，然后使用它来运行教程介绍的各种命令。一旦项目目录准备好了，然后运行以下两个命令（第一个命令确保转到目中）：
cd webpack-example
npm init -y
在本例中，我将示例项目的根文件夹命名为webpack-tutorial。你可以随意命名。npm init -y命令使用npm的默认设置初始化目录，这会创建一个package.json的文件。
下一步，安装 webpack 和 webpack CLI
npm install webpack webpack-cli --save-dev
一旦我将两个包都安装为项目的依赖项，我的package.json文件将如下所示：
{
"name": "webpack-tutorial",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.72.1",
"webpack-cli": "^4.9.2"
}
}
注意底部附近列出的两个作为依赖项的包（webpack 和 webpack-cli），这个项目现在基本上可以使用webpack作为它的打包器了，因此可以开始在这个webpack教程中付诸实践了。
设置要捆绑的项目在当前状态下，本项目还没有绑定任何东西，因此我们可以添加一些东西来演示一个简单的绑定过程是如何发生的。仅此一项就足够让你开始使用webpack了，但是后面会添加一些配置，使得webpack变得更加强大。
在与package.json文件同目录下，添加以下内容：
src的文件夹在src下创建一个名为index.html的文件在src下创建一个名为index.js的文件一个dist文件夹
webpack文档很好地解释了src (source)和dist (distribution)文件夹的用途(尽管这不是针对webpack的，更多的是关于打包和构建过程的):
The “source” code is the code that we’ll write and edit. The “distribution” code is the minimized and optimized output of our build process that the browser will display.
理想情况下，包设置将在每次创建包时清空dist文件夹。后面会做介绍，但现在更专注于src文件夹中的文件（编辑一直在该文件夹中进行）。
首先，我需要给index.html和index.js文件中添加一些内容。自然，index.html文件可以包含任何内容。我通常会将所有网站内容包括在src目录中，包括样式表、图像等，但这个简单的示例只是为了演示webpack的特性。
传统做法上，当想要在项目中添加一个或多个依赖库时，应该使用单独的