PACK的官方文件是webpack.js.org/.
包装的官方中文文件是webpack.docschina.org/.
单击文档转到文档页面:
API:API，提供相关接口，可以自定义编译过程。
博客:BLOG，相当于上一页签的博客，里面包含一些博文；
概念:概念，主要介绍webpack的一些核心概念，如入口、出口、加载器、插件等。，但是没有详细的API在这里分析它们；
配置:CONFIGURATION，webpack的详细配置选项，可以在这里找到，更多时候是作为查询手册；
GUIDES:一个指南，更像是webpack提供的教程。我们可以根据这个教程一步步学习使用webpack的过程；
加载器:webpack的核心之一加载器，在这里可以找到常用加载器的用法，比如css-loader、babel-loader、lessloader等等；
插件:插件，webpack的核心之一，常见的插件可以在这里找到使用方法，比如Banner插件、CleanWebpackPlugin、MiniCssExtractPlugin等等；
迁移:迁移，可以通过这里的教程等将webpack4迁移到webpack5。
前端开发的复杂性
我们目前前端开发面临哪些复杂的问题？
比如在开发过程中，我们需要采用模块化的方式进行开发；
比如我们也会使用一些高级的功能来加快我们的开发效率或者安全性，比如通过ES6+和Typescript开发脚本逻辑，通过sass和less编写css样式的代码。
比如在开发过程中，我们也希望实时监控文件的变化，并反映到浏览器上，提高开发效率；
比如开发结束后，我们需要对代码进行压缩、合并和优化。
等待...
有三个前框架的脚手架
目前比较流行的前端框架有三种:Vue、React和Angular。
但其实我们都是用脚手架来打造这三个框架的。
实际上
Vue-CLIcreate-react-appAngular-CLI都是基于
webpack帮助我们支持。
模块化es6打包优化等等。；
什么是Webpack？
Web pack是现代Javascript应用程序的静态模块绑定器。Web pack是一个静态的模块化打包工具。对于现代的Javascript应用，我们来拆解一下上面的解释:
打包捆绑器:webpack可以帮助我们打包，所以它是一个打包工具。
Static:这样表达的原因是我们终于可以把代码打包成最终的静态资源了；
模块:Web Pack默认支持各种模块化开发，如ES模块、CommonJS、AMD等。
现代:正如我们在前端所说，正是因为现代前端开发面临各种问题，才诞生了webpack的出现和发展；
工作中的网络包
在日常工作中，比如在开发vue、react、angular等项目的过程中，我们需要一些特殊的配置:比如别名一些目录结构，让我们的项目支持sass等前置处理器，希望在项目中手动添加对Typescript的支持，这些都需要对webpack进行一些特殊的配置工作。
当然，除了日常工作，如果我们想在原有的脚手架上定制一些自己的特殊配置来提供性能:比如安装性能分析工具，使用gzip压缩代码，引用cdn资源，提取常用代码等。，甚至包括需要编写我们自己的加载器和插件。
对于前端开发人员来说，想要成为前端领域的高级前端开发工程师甚至架构师，webpack等构建工具是必须要学习的，包括一些高级的特性和原理，而且必须要精通。企业在招聘高级前端工程师或架构师时，必然会对webpack等构建工具有更高的要求。
vue-cli-service的运行过程
Webpack的依赖性
Webpack的操作依赖于节点环境，所以我们的计算机上必须有节点环境。
所以我们需要先安装Node.js，还有npm将同时安装；
我目前电脑上node的版本是v15.4.0，npm的版本是7 . 0 . 15；
节点官方网站:nodejs.org/
Webpack的安装
目前webpack的安装分为两部分:，webpack-cli。那么它们之间是什么关系呢？
执行webpack命令将在。node_modules下的bin目录；
webpack执行时依赖于webpack-cli，不安装会报错；
webpack-cli中的代码执行时，就是用webpack编译打包的过程。
所以在安装webpack的时候，我们需要同时安装webpack-cli。
m安装web pack web pack-CLI–g #全局安装NPM安装web pack web pack-CLI–d #本地安装
传统发展中存在的问题
我们的代码有什么问题？一些语法浏览器未知。
1.使用ES6的语法，比如const和arrow函数；
2.使用ES6中的模块化语法；
3.使用CommonJS的模块化语法；
4.通过脚本标记引入时，必须添加type="module "属性；
显然，由于上述问题，在发布静态资源时，我们不能直接发布，因为在用户的浏览器中运行时必然会出现各种兼容性问题。
我们需要通过某种工具将其打包，转换成浏览器可以直接识别的语法；
Webpack默认包
我们可以打包，然后运行打包的代码。
直接在目录中执行webpack命令。
生成一个dist文件夹，里面存放一个main.js的文件，就是我们打包后的文件:
该文件中的代码被压缩和篡改；
暂时我们不关心他是怎么做到的。我在讲webpack的模块化原理的时候会再讲。
另外，我们发现代码中仍然存在ES6的语法，比如箭头函数、const等。这是因为默认情况下，webpack不知道我们打包的文件是否需要转换成ES5之前的语法，后面需要通过babel进行转换和设置；
我们发现可以正常包装，但是有一个问题。webpack如何决定我们的入口？
事实上，当我们运行webpack时，webpack会在当前目录中寻找src/index.js作为条目；
因此，如果当前项目中不存在src/index.js文件，则会报错；
当然，我们也可以通过配置来指定入口和出口。
npx网络包-入口。/src/main.js -输出路径。/构建
Webpack命令行选项
我们可以通过命令行选项指定入口文件的路径和webpack生成文件的路径。
Xwebpack的意思是进入。/node_modules/。bin/webpack来运行webpack，即使用项目本地安装的webpack - entry来指定应用的入口文件，比如。例如/src/main.js-output-path。/dist。
还有以下常见的命令行选项:- config提供webpack配置文件的路径，例如。/webpack.config.js-env当它是一个函数时，它被传递给已配置的环境变量- watch以监听文件更改- hot以启用webpack.docschina.org/api/cli/#flags. HMR
Wepack的全局安装和本地安装
一般来说，我们选择在我们的项目中本地安装webpack，因为如果我们使用全局版本，在从事同一项目的同事的计算机上全局安装的webpack的版本可能会有差异。比如我安装的版本是5，同事安装的版本是4，也可能是3，这样用全局webpack打包就会有问题。如何在项目中本地安装webpack？
1.执行npm init以生成package.json文件。
npm初始化
2.执行以下命令以部分安装webpack，webpack-cli
npm安装webpack webpack-cli -D
3.在package.json中配置脚本
4.为打包执行npm运行构建。在这个时候。/node_modules/。首选当前目录下的bin/webpack进行打包。*仅当webpack未安装在此项目的本地时，全局webpack才会用于打包*
Webpack配置文件
一般情况下，webpack中要打包的物品非常复杂，我们需要一系列的配置才能满足要求，所以默认配置是必然的。我们可以在根目录下创建一个webpack.config.js文件作为webpack的配置文件:
Const path = require//使用webpack进行打包时，webpack会自动到项目的根目录下找到配置文件webpack.config.js，加载里面的配置，打包module.exports = {entry:'。/src/main.js '根据配置选项，输出:{filename:' bundle.js '，path:path.resolve//The输出文件路径必须是绝对路径}}
继续执行webpack命令，仍然可以正常打包。
指定配置文件
但是如果我们的配置文件不是webpack.config.js的名字，而是其他名字呢？
比如我们把webpack.config.js改成了wk . config . js；；
这时，我们可以通过命令行选项- config指定相应的配置文件；
网络包-配置wk.config.js
但是每次执行这样的命令来编译源代码，会非常繁琐，所以我们可以在package.json中添加一个新的脚本:
之后，我们执行npm run build来打包它。
Webpack依赖关系图
webpack如何打包我们的项目？
其实webpack在处理应用的时候，会根据命令或者配置文件找到入口文件；
从门户开始，将生成一个依赖图，其中将包含应用程序中需要的所有模块；
然后遍历图结构，逐个封装模块；
