Webpack官方网站
WebPack是现代JavaScript应用程序（模块Bundler）的静态模块包装器
现代JavaScript应用程序的静态模块包（模块Bundler）
除了合并代码外，您还可以翻译和压缩代码
环境准备：它基于nodejs，因此必须先安装机器。
项目准备：WebPack用于打包现有项目，因此必须在某个项目下应用。
知识准备：模块化（ES6，可以使用COMPORJS模块化）
目的：在现有项目中，在HTML文件中引入了两个JS文件以完成功能。现在，任务是将这两个JS打包到JS文件中。
操作步骤如下：
在初始化项目中创建一个新的空文件夹，名为webpack-demo，输入文件夹的内部，然后使用命令生成一个package.json。
准备初始代码以创建三个文件index.html，index.js，tool.js，最终项目结构为：
复制以下材料：
index.html
tool.js
index.js
阐明：
由于tool.js的函数在index.js中使用，因此同时也在index.html中引用它。还引用了index.js和tool.js，tool.js的参考位于index.js参考的前面。整个代码的示意图如下：
上面的代码中存在以下问题：
解决方案：模块 + WebPack包装
WebPack是可以用于所有项目的工具。从这个意义上讲，它可以在全球安装。但是，考虑到不同的项目可能使用不同的WebPack版本，不建议每个人都进入整体情况到全球情况。键入。尤其是在打开旧项目时，请务必注意其WebPack版本的WebPack。
前端的许多悲惨故事都从不一致的版本开始。
将其安装在本地安装方法中。请注意，这只是开发依赖性，而不是生产依赖性，因此将-D添加到命令行。
命令如下：
让我们检查一下安装是否通过命令行工具成功。
注意：
WebPack作为独立工具，与特定项目无关。在您的项目中，通过开发依赖性来安装它。
以模块化的方式修改：
它用于在工具中提供一种方法。
在index.js中介绍模块的方法。
由于现在的模块化处理方法现已在index.js中使用，因此不能直接在浏览器中使用。如果直接在index.html中引用它，则浏览器将报告错误。
我们需要使用webpack命令来处理index.js。
命令格式为：NPX WebPack文件名称
这里的操作是：
如果您没有遇到错误，您将看到类似的结果如下：
它表明包装操作已经成功：index.js and tool.js已合成一个main.js文件。
WebPack将在入口文件中分析参考关系，并将相关文件合成为.js文件
说如下：
将上面包装的主介绍给index.html
示意图如下：
好的，现在您可以看到此代码可以正常工作。
工具操作的默认参数配置将放置在特定文件中。例如：雷声/百度NetDisk的文件下载在哪里？
在项目root目录中创建WebPack.config.js。内容如下：
该文件的意义是导出配置项目：设置WebPack的包装行为。在操作级别，它是学习如何使用此文件的。
然后，再次运行包装命令，检查生成的main.js文件的内容，然后比较它们之间的更改。
在配置文件中，配置自定义入口和退出
入口文件：指定哪个文件webpack从内部引入其他模块，以便在包装时将“触摸”并打包其他文档。
导出文件：在上次包装之后指定文件，重点是该文件的特定位置。
在WebPack中，默认入口和导出是：
换句话说，如果我们直接在根目录中运行webpack，它将直接转到.src下的index.js，并在远端/main.js包装后放置代码。
修改目录结构，创建新的SRC目录，然后将index.js，tool.js，tooles6.js移动到它。
直接并直接打包目标：因为index.js已经存在于SRC目录中
让我们再次测试。
需求：如果在实际发展中，希望：
解决：
（1）调整目录结构如下：
（2）然后，修改配置项目
在webpack.config.js中设置输出项目。
目标：将导出文件设置为构建目录中的bundle.js
阐明：
WebPack.config.js中的模式项目用于设置包装方法。如果未设置，它将默认为问题。
WebPack提供了两种模式：
●开发：开发模式（代码不会被压缩和混淆）●生产：生产模式（压缩，混乱，加密...我无法阅读）
在下面，创建一个webpack.dev.js文件，使用它来制作配置文件。
在项目root目录中创建WebPack.dev.js。内容如下：
下面，我希望使用此配置文件中的设置进行包装。
它的格式是：
运行命令：
指定多个包装配置时，包装命令更加复杂且难以记住。
您可以将脚本命令添加到package.json中的webpack。格式如下：
“脚本”：{“自定义命令名称”：“要执行的代码”，}，}
注意：脚本中不再需要NPX。它将在node_modules/.bin中自动找到命令。
这样，我们得到了可以执行的两个命令：开发，构建。
您可以通过根目录下的小黑色窗口：
NPM运行构建，NPM运行开发
在WebPack中，所有内容，图片，样式文件，JS文件。...但是，WebPack默认情况下只能处理JS模块。对于非JS内容，例如CSS，更少的文件，图片文件等。它需要一些帮助者来处理它。这些帮助者是加载程序。
WebPack可以使用加载程序来预处理文件。这允许您打包JavaScript以外的所有静态资源。您可以使用Node.js简单地编写自己的加载程序。
如何介绍CSS文件？
在传统开发中：CSS样式是通过.html文件中的链接标签引入的。但是，在现代开发中，我们将把CSS文件视为资源，并直接在.js文件中导入它们。
下面，让我们讨论如何处理.CSS文件。
src/css/public.css的内容如下
src/css/style.css的内容如下
注意：CSS的@Import语句用于导入另一个CSS文件。
就像element-ui的说明中提到的VUE项目中的第三方UI样式一样，在JS文件中介绍CSS：
显然，上面的.JS代码引入了.css。
在下面，我们修改我们的main.js，并在src/js/main.js中介绍CSS。
同样，软件包代码将报告错误。具体保存信息如下：
上述错误的原因是：WebPack将.CSS文件的内容作为JS代码运行，当然会报告一个错误。因此，解决方案是安装相应的加载程序来处理它。
对于加载程序的使用，基本步骤相同，分为两个步骤：
安装
安装软件包的命令是：.T也正在开发依赖性。
在配置文件中使用修改后的webpack.config.js文件添加模块
它不会再次报告错误。
如果我们希望样式生效，.html文件中有两种情况：
CSS-Loader只能允许您通过.js导入介绍.css。如果您要介绍的CSS代码最终插入了样式标签中的HTML页面，则还需要安装一个加载程序：style-Loader
安装
配置
提示：在没有多个加载程序的情况下，使用数组中的加载程序执行顺序是从右到左。
包装和观看的效果现在可以看到CSS的效果。
如果要处理较少的文件，则需要安装附加软件包。
在SRC目录的较少目录中创建索引。
内容如下：
SRC/JS/MAIN.JS文件中的LINS介绍
参考官方网站
将配置添加到规则中，专门针对更少的文件。
注意：与上述配置一样，较少文件的处理涉及三个加载程序。处理顺序是较小的加载程序 - > css-loader-> style-loader。
目的：处理资源文件。用于介绍CSS中的图片，我该怎么办？
添加目录，IMG，并在SRC下放置两张图片。注意：一张图片更大，图片较小（您可以决定自己）。
使用图片的两种方法：
导入style.css的图片，背景为div标签。
在src/main.js中，将代码传递给创建的IMG标签中，添加身体显示屏
webpack5具有构建的处理方案，只需填写配置即可参考：资产模块资源模块文档
webpack.config.js中的内容如下
除了加载程序外，WebPack还具有核心概念：插件，中文是插件-in。它可用于增强WebPack的功能。
插件用于扩展WebPack的功能。各种插件都可以使WebPack执行与构建相关级别有关的任何事情。插件的配置非常简单。插件配置项目接收一个数组。每个数组都是要使用的插件实例。插件所需的参数通过构造函数。
使用插件的困难在于插件本身的配置项目，而不是如何在WebPack中引入插件。几乎所有的Webpack都无法直接实现功能。我们可以找到可以解决的开源插件。我们要做的是根据我们的需求找到相应的插件，根据自己的需求找到更多。
功能：复制我们写入指定的包装出口目录的.html文件并介绍相关的资源代码。
添加外部资源，例如脚本和链接到HTML文件，在每个编译之后添加每个哈希，以防止引用缓存的外部文件问题。可以生成HTML条目文件。
官方网站：https：//www.npmjs.com/package/html-webpack-插件
实施步骤：
命令：npm i html-webpack-plugin -d
在webpack.config.js中，做两件事：
在生成包装文件之前清除目录。
安装
修改配置文件
插件用于增加WebPack功能。
步：
Real -Time包装预览效果。当我们修改代码时，立即运行包装命令并显示效果。
这
注意：
服务器通过“”提供了浏览器看到的实际时间效果。没有物理文件，它将不会生成Distil目录
能够将ES6的高级内容转换为ES5加载程序名称是Babel-Loader
有许多高级标准，例如ES6/ES7/ES8等（让，箭头功能，对象解构分配，...扩展运算符，反huk字符串等）。如果您使用许多高级标准内容，则为此，必须安装许多插件，以使工作很麻烦。系统已经考虑了此。可以完成此功能（如果将项目应用于远程高级标准内容，则无法处理预设，并且您需要安装相应的插件处理）））））））
令---- dowager->插件
箭头功能---- dowager->插件
NPM官方网站：Babel-looder
Babel官方网站：https：//www.babeljs.cn/setup#installation
步：
注意： @babel/preset-env用于指定要降级的预设
目标：源地图概念，用于使用浏览器调试错误，在包装代码之前记录原始位置
解决方案：启用源地图开发环境
生产环境
DevTool值说明规则字符串列表：https：//webpack.docschina.org/configuration/devtool/
格式：[inline- |隐藏 - |eval-] [nosources-] [cheap- [module-]]源图（只需了解）
错误的建立：最快的重建：最快的开源源（规则值是错误的，也是错误的值也是这样）创建的：最慢的重建：最慢的嵌入式错误信息以及源代码和源代码和源位置信息隐藏式建立：最慢的重建：最慢的独立独立独立独立独立独立独立独立独立独立独立独立独立独立独立独立独立独立独立独立性档案报告错误信息信息，没有来源和来源的位置信息评估：快速重建：最快嵌入式错误信息，以及源代码（使用此值时使用此值）便宜了源代码的行数（无列）模块已建立：慢重建：快速使用其他用途，用于使用是否使用加载程序加载程序要生成源地图[xxx -...]创建的源映射：慢慢重建：最慢的独立地图文件信息信息以及建立源代码和源位置信息的建立。
DevTool常用组合
WebPack还支持ES6模块化。
创建一个新工具6.js文件，内容如下：
请注意，此处使用ES6中的模块化导出。
接下来，在index.js中介绍并使用此模块
最后，包装index.js和index.html中的测试。
它可以处理nodejs中ES6的模块化和模块化。
WebPack的操作过程是一个串行过程。从开始到结尾，将依次执行以下过程：
在上述过程中，WebPack将在特定时间点广播特定事件。插件后，感兴趣的事件将执行特定的逻辑，并且插件 - 可以调用WebPack提供的API以更改WebPack的操作结果
WebPack的热更新（也称为热模块更换）被缩写为HMR。此机构可以替换新更改的模块而无需刷新浏览器。
HMR的核心是服务器的更新文件。确切地说，块差异（需要更新块）。实际上，WDS（WebPack-dev-server）和浏览器维护Websocket。当地资源更改时，WD会更新到浏览器并在构建构建时带上哈希，使客户可以与先前的资源进行比较客户对比后，差异将发送到WDS以获取更改内容（文件列表，哈希），以便客户可以在WDS的帮助下继续将JSONP请求启动到块增量更新。
后续部分（如何处理增量更新？应该保留哪些状态？需要更新什么？）它是由Hotmoduleplugin完成的，为开发人员提供了相关的API，以处理自己的场景，例如React-Hot-Loaderand and.Vue-loader均在这些API的帮助下实现了HMR。
1.文件加载程序：将文件输出到文件夹中，并将输出文件通过代码中的相对URL引用到输出
2. URL-loader：类似于文件加载程序，但在小文件的情况下
3.源映射加载程序：加载其他源地图文件以促进断点调试
4.图像加载程序：加载和压缩图片文件
5. Babel-Loader：将ES6转换为ES5
6. CSS-Loader：加载CSS，支持模块化，压缩，文件简介和其他特征的特征
7.样式加载程序：将CSS代码注入JavaScript并通过DOM操作加载CSS。
8. Eslint-Loader：通过ESLINT检查JavaScript代码
1）不同的功能
Loader实际上被翻译为“ Loader” .WebPack将所有文件视为模块，但是WebPack本来只能分析JS文件。如果要打包其他文件，则将使用Loader。因此，加载程序的作用是允许WebPack具有加载和分析非JavaScript文件的能力。
插件实际上被翻译为“插件” .plugin可以扩展WebPack的功能，从而使WebPack更具灵活性。在WebPack运行的生命周期期间将播放许多事件。插件可以在合适的时间通过WebPack提供的API来收听这些事件，并通过WebPack提供的API更改输出结果。
2）不同的用法
加载程序是在模块中配置的，这意味着他作为模块的分析规则存在。该类型是一个数组，每个数组是一个对象，它描述了哪种类型的文件（测试），哪些加载和使用参数（选项）。
插件在插件中分别配置。该类型是一个数组，每个数组是插件的实例，并且参数由构造函数介绍。