本章主要介绍WebPack高级配置。
SO称为高级配置实际上是在优化WebPack，因此我们的代码在编译/运行时?时具有更好的性能?
我们将从以下角度进行优化：
我们在开发过程中运行的代码由WebPack编辑。例如，以下方式：
所有CSS和JS都合并到文件中，并且有更多代码。这次，如果代码运行错误，则提示不了解代码错误位置。将来有很多代码文件，它是很难找到错误出现的位置。
因此，我们需要更准确的错误来帮助我们更好地制定代码。
Sourcemap（源代码映射）是一种生成文件以生成源代码的文件，构造后一个-One -One -One -to -One映射。
它将生成一个包含源代码的xxx.map文件，以及施工代码后每行和列的映射关系。当代码错误时，将通过xxx.map文件找到xxx.map文件以找到错误制作代码后映射源代码后的位置，以便浏览器提示源代码文件错误位置以帮助我们更快地找到错误的源。
通过查看WebPack DevTool文档，有很多案例具有SourceMap的价值。
但是在实际发展中，我们只需要注意两种情况：
在开发过程中，我们修改了其中一个模块。WebPack默认情况下对所有模块进行了重新计算，并且速度非常慢。
因此，我们需要修改模块代码。只有此模块代码需要重新编写，并且其他模块保持不变，以便包装速度可以快速。
hotmodulerplacement（更换HMR/热模块）：在程序操作中，在不重新加载整个页面的情况下更换，添加或删除模块。
目前，CSS样式由样式加载器处理并具有HMR函数。但是JS不好。
这样写会很麻烦，因此我们将使用其他装载机来解决它。
例如：vue-loacter，react-hot-loader。
包装时，所有加载程序都会处理每个文件。尽管由于常规原因没有进行处理，但必须通过一次将其通过。
顾名思义，它只能匹配加载程序，其余的将不匹配。
还配置了生产模型。
在开发过程中，我们需要使用第三方库或插件，并将所有文件下载到node_modules。这些文件无需直接编译。
因此，在处理JS文件时，我们必须排除Node_modules下方的文件。
包括，仅处理XXX文件
排除，处理XXX文件以外的文件
还配置了生产模型。
每次我打包时，Babel都会检查和编译JS文件，这相对较慢。
我们可以缓存Eslint检查和Babel汇编结果的结果，以使第二个包装的速度更快。
缓存的Eslint检查和Babel汇编结果。
当项目越来越大时，包装速度越来越慢，即使是一个下午，也可以打包代码。这种速度相对较慢。
实际上，我们希望继续提高包装速度，以提高JS的包装速度，因为其他文件相对较少。
JS文件的处理主要是三个工具：Eslint，Babel和Terser，因此我们需要提高其运行速度。
我们可以同时打开JS文件，因此速度比以前的单个进程快。
多过程包装：计算机的多个过程同时执行一件事，更快。
应该注意的是：请在特别耗费的操作中使用它，因为每个过程都始于大约600ms的开销。
我们开始的数量是我们CPU的核数。
我们当前包装的内容非常小，因此由于启动过程的启动，使用多进程包装实际上会大大使我们打包时间。
在开发过程中，我们定义了一些工具函数库，或引用第三部分工具函数库或组件库。
如果没有特殊待遇，我们将在包装时介绍整个图书馆，但实际上，我们只能使用很小的功能。
这样，整个库都被包装了，而且音量太大了。
这个术语通常用于描述去除JavaScript的未使用的代码。
注意：这取决于。
WebPack默认情况下打开了此功能，没有其他配置。
Babel插入编译每个文件的辅助代码，以使代码太大！
Babel使用非常小的辅助代码来用于某些公共方法，例如默认情况下，它将添加到每个需要它的文件中。
您可以将这些辅助代码用作独立的模块，以避免重复介绍。
：Babel被禁用以注入每个文件的运行时，但是将其引入，并从此处引用所有辅助代码。
如果项目中有更多图片，则图片的数量将相对较大，并且未来的请求速度将相对较慢。
我们可以压缩图片并减少图片量。
注意：如果项目中的图片是在线链接，则不需要。需要压缩本地项目的静态图片。
：插件 - 用于压缩图片
有两个左袋需要下载，有两种模式：
损失/无损压缩之间的区别
我们以非毁灭性压缩配置为例：
我们需要将两个文件安装到node_modules来解决。可以从课程中找到文件：
需要在下面复制它
jpegtran官方网站地址
需要在下面复制它
选择官方网站地址
当软件包代码太大时，所有JS文件都会被包装到文件中。如果我们只需要渲染主页，我们只能将JS文件加载到主页上，并且不应加载其他文件。
因此，我们需要将包装生成的文件划分并生成多个JS文件。它仅加载某个页面渲染的某个JS文件，因此加载的资源较少，速度更快。
代码拆分主要做了两件事：
代码分割实现的方式有不同的方式。为了更好地反映它们之间的差异，我们将创建新文件以单独演示
1.多进
内容无关紧要，主要观察包装输出的结果
目前，我们可以在DIST目录中看到两个JS文件的输出。
摘要：配置多个入口并至少输出一些JS文件。
2.如果在多个导入文件中引用重复代码，请提取相同的代码。我们不希望将此代码打包到两个文件中，从而导致代码重复，并且卷更大。
我们需要提取多输入的重复代码，仅包装和生成JS文件，并且可以引用其他文件。
目前，我们将发现生成三个JS文件，其中一个是提取的公共模块。
3.按需加载，动态介绍以实现按需加载，动态导入模块。此外，需要其他配置：
我们可以发现，一旦导入动态导入语法导入模块，该模块就会按代码进行划分，并且可以按需加载。
4.在开发单个入口期间，我们可以是单页应用程序（SPA），只有一个入口（单个入口）。然后我们需要配置以下内容：
5.最终更新配置，我们将使用单个 - 输入+代码分割+动态导入方法来配置。
6.给动态导入文件的名称
观察软件包输出JS文件的名称。
我们之前已经进行了代码细分，同时，我们使用导入动态导入语法按需加载代码（我们也称为懒惰加载，例如路由的懒惰加载）。
但是，加载速度还不够好。例如，当用户单击按钮加载此资源时，如果资源很大，则用户将感觉到明显的口吃效果。
我们希望在浏览器免费时加载我们需要使用的资源。我们需要使用或技术。
他们的共同点：
他们是不同的：
总结：
他们的问题：兼容性不佳。
将来，我们将将来使用缓存来优化静态资源，以便浏览器的第二个请求资源可以读取缓存，并且速度很快。
但是，在这种情况下，将会有一个问题，因为相同之前和之后的文件名输出，all asl ash ain.js。一旦将来发布了新版本，由于文件名没有更改，浏览器将直接读取缓存，并且不会加载新的资源项目。
因此，我们从文件名开始，以确保文件名在更新之前有所不同，以便我们可以进行缓存。
它们都产生独特的哈希值。
每个文件的每次修改，所有文件名的哈希都会更改。因此，一旦修改了任何文件，整个项目的文件缓存将失败。
执行因文件分析并基于不同的输入文件（条目）构建相应的块以生成相应的哈希值。我们的JS和CSS在同一中引入以共享哈希值。
哈希值是根据文件的内容生成的，只有文件更改的内容才能更改哈希值。所有文件都是独家和不同的。
当我们修改Math.js文件，然后由于ContentHash而再次包装它时，Math.js文件的哈希值已更改（这是正常的）。
但是main.js文件的哈希值也更改了，这会导致main.js.s.s.s.s. ockiely我们只修改Math.js，为什么Main.js也会转换？
在运行时文件中分别支付哈希值。
我们最终输出三个文件：主，数学和运行时。当将数学文件发送到更改时，数学和运行时文件被更改，并且MAIM保持不变。
运行时文件仅保存文件的哈希值以及它们与文件之间的关系。整个文件的音量相对较小，因此更改请求的成本很小。
过去，我们使用Babel与JS代码兼容。其中，@babel/preset-eenv智能预设用于处理兼容性问题。
它可以编译ES6的某些语法，例如箭头函数，点运算符等。但是，如果它是异步函数，请承诺对象，一些数组方法，则无法处理。
因此，目前，我们仍然存在兼容性问题。一旦遇到浏览器的低版本，我们将直接报告错误。因此，我们要完全解决JS兼容性的问题
它专门用于进行ES6及以上的API。
该翻译称为填充/补丁。它是使用社区提供的一件代码在与某些新功能不兼容的浏览器上使用此新功能。
目前，ESLINT将报告Promise的错误。
目前，观察包装输出的JS文件，我们发现尚未编译和转换承诺语法，因此我们需要使用它。
本简介将介绍所有兼容性代码，并且卷太大。我们只想引入承诺。
只有引入承诺，包装量较小，但是如果您将来仍然想使用其他语法，则手动介绍库会很麻烦。
目前，它将根据我们的代码中使用的语法自动加载相应的按需加载相应的按需加载。
开发Web应用程序项目。该项目离线后，将无法访问。
我们希望为该项目提供离线体验。
Progressive Web应用程序-PWA：这是一项可以提供类似于本机应用程序（本机应用程序）体验的Web应用程序的技术。
最重要的是，该应用程序可以在离线时继续运行该功能。
通过内部的服务工作人员技术实现。
目前，如果您直接通过VSCODE访问数据包，则将在浏览器控制台上找到它。
因为我们打开的访问路径是：。此时，将要求页面询问文件。请求路径是：“这找不到404。
实际文件路径是：。
服务还用于启动开发服务器以部署代码以查看效果。
目前，我们可以通过服务器启动的服务器成功注册。
我们从4个角度优化了WebPack和代码：
好吧，这里是今天的高级章节。在下一篇文章中，我们将讨论该原则。
原始：https：//juejin.cn/post/709997244968028388