TL；DR:2018年2月25日，星期日，webpack4.0向公众发布。Legato（weboack4.0的代号）是JavaScript模块绑定器的主要版本。自从3.0发布以来，已经花了大约8个月的时间。在本文中，大数据局，我将介绍webpack4.0中的新特性以及其他一些更改和不推荐使用的特性。Webpack是一个支持JavaScript应用程序的模块绑定器。它将应用程序中的每个模块打包成至少一个文件（通常只有一个），并将其提供给浏览器。无论如何，Webpack不仅仅是一个模块绑定器。在加载程序和插件的帮助下，它可以更改、缩小和优化范围广泛的文件，然后将它们作为捆绑包提供给浏览器。它接受不同的资源，例如JavaScript、CSS、字体、图像和HTML，然后将这些资源更改为有助于通过浏览器使用的配置。Webpack真正的能量在于它的所有部分。好了，够了，这篇文章对webpack做了一个简单的介绍。现在，webpack4.0有什么新功能？WebPack4.0的新增功能？1节点.js4支架脱落节点.js不再支持4。源代码已升级到更高版本的ECMAScript。Webpack的创建者Tobias警告用户使用Node>=8.9.4以获得最佳性能，因为代码库中现在使用了更新的JavaScript特性。2再见了CommonsChunkPlugin，你好SplitChunksPlugin很遗憾看到你走了，亲爱的CommonsChunkPlugin。臭名昭著的CommonsChunkPlugin已经被删除，取而代之的是两个名为优化.splitChunks以及runtimeChunk优化. 让我解释一下！webpack4对区块图进行了巨大的改进，并为区块分割提供了一种新的优化技术。在改进的过程中，物联网开发，一个新的插件诞生了，叫做SplitChunksPlugin。SplitChunksPlugin自动识别应该通过启发式方法分割的模块并分割块。它还有其他一些很好的特性，比如高效地处理异步块，以及处理多个供应商块的供应商拆分。默认情况下，会自动在WebPack4中为您自动生成共享块。它可以通过优化.splitChunks. 这个runtimeChunk优化：true选项向每个仅包含运行时的入口点添加一个附加块。Tobias有令人信服的例子来说明新的优化技术是如何工作的！。三。现成的WebAssembly支持WebAssembly（wasm）是一种新的可移植的、高效的、适于编译到web上的加载格式。它真的很快，开发人员社区正在迅速接受它。因此，webpack4现在支持开箱即用的WebAssembly。在webpack4中，您可以导入和导出任何本地WebAssembly模块。您可以编写装载器，允许您直接导入C++、C和RIST。注意：WebAssembly模块只能在异步块中使用。4支持各种模块类型webpack4现在支持五种模块类型。这些模块类型包括：javascript/auto:webpack3支持此模块类型，支持所有模块系统，CommonJS，AMD，ESM。javascript/esm：只支持ECMAScript模块。javascript/dynamic：只支持CommonJS和AMD。json：只支持json数据，可以通过require和import获得。webassembly/experimental:仅支持webassembly模块。目前，它还处于实验阶段。"Webpack 4现在支持五种模块类型。"在推特上留言5用模式点火我对这个特性比目前宇宙中所有人都更兴奋。为了实现零配置（#0CJS）模块绑定器，Webpack团队引入了一个名为mode all的新配置属性。可以将mode选项设置为这两个值之一：development或production。开箱即用，默认为生产。生产选项提供了一组合理的默认值，允许：输出尺寸小。运行时快速代码。省略只用于开发的代码。不公开源代码或文件路径。易于使用的输出资产。开发选项提供了一组合理的默认值，大数据分析应用，允许：更好的工具用于浏览器内调试。快速增量编译，以加快开发周期。更好的运行时错误消息。查看受模式影响的配置选项。注意：如果没有Webpack配置中的mode选项，返现网，将向您发出警告。6零配置模块绑定器OCJS在此之前，必须在webpack.config.js用于捆绑应用程序的Webpack文件。但是，对于webpack4，不需要定义入口点，它需要./src/索引.js作为默认值。此外，也不需要定义输出文件，它将bundle发送到/.dist/主.js."Webpack 4支持零配置（#0CJS）设置。例如，它将使用./src/索引.js作为默认入口点。"在推特上留言当启动小项目时，这个巧妙的特性的重要性就会显现出来。不需要配置文件。只需网页包！没有任何配置和输入文件的webpack4。没有任何配置文件的网页包4。只是一个src/索引.js文件。7更快的构建时间webpack4的构建时间比以前的主要版本快了98%。别相信我的话。你自己试试吧。您可以这样开始使用Webpack 4：npm i webpack—保存开发或者使用类似的纱线：纱线添加网页包——开发在你的包.json的devDependencies部分，现在应该有："网页包"："^4.0.0"网页包3:2405msWeb包3的生成时间网页包4:1388msWeb包4的生成时间webpackv4在构建时间上几乎比v3快2倍！其他来自社区的性能测试可以在下面找到：8新插件系统webpack4附带了插件系统的全面检修。插件和挂钩有一个新的简单API，它具有以下配置：hooks对象将所有钩子作为可扩展类的属性。现在根据钩子类型存在多个钩子类：sync、async、normal、bailing、fallfall、looping。添加插件时必须提供名称。您可以在添加插件时选择插件的类型（sync/callback/promise）。这个。钩子={myHook:newsynchook（…）}是注册钩子的新方法。创建一个新的钩子对象作为hooks对象的属性。托比亚斯写了一篇关于新插件系统如何工作的全面说明。plugin方法是向后兼容的。9向webpack cli的巨大转变Webpack的命令行界面已移动到Webpack cli，您需要安装Webpack cli才能使用cli。webpackcli文档可以帮助您开始有效地使用webpackcli。更新和其他抨击这些插件已经被弃用，noemotonerrorsplugin，modulecatenationplugin，NamedModulesPlugin。你现在可以使用优化.noemotonerrors, 优化.连接模块，云的服务器，和优化.namedModules分别。import（）始终返回命名空间对象。Webpack现在默认删除死分支。使用系统.导入（）现在发出警告。import（）的magic comment支持webpackInclude和webpackExclude。它们允许在使用动态表达式时过滤文件。网页包5之路webpack5有几个计划正在进行中。其中一些计划包括：稳定的WebAssembly支持。创建自定义模块类型并让Webpack支持它的能力。消除ExtractTextWebpackPlugin并支持现成的CSS模块类型。支持开箱即用的HTML模块类型。持久缓存旁白：Auth0的Webpack和JavaScript在Auth0，我们在开发中大量使用JavaScript，并使用Webpack等构建工具自动执行任务。从JavaScript web应用程序使用我们的认证和授权服务器是小菜一碟。Auth0提供了一个免费层来开始现代身份验证。安装auth0 js和jwt解码节点模块非常简单，如下所示：npm install jwt decode auth0 js--保存从0的AuthJS导入；const auth0=新建auth0.WebAuth({clientID:"YOUR-AUTH0-CLIENT-ID"，域："YOUR-AUTH0-domain"，scope:"openid电子邮件配置文件YOUR-ADDITIONAL-SCOPES"，audition:"YOUR-API-accounters"，//请参见https://auth0.com/docs/api-authresponseType:"令牌id_token"，重定向URI:"http://localhost：9000"//YOUR-REDIRECT-URL});函数logout（）{localStorage.removeItem（'id_token'）；localStorage.removeItem（'access_token'）；window.location.href= "/";}函数showProfileInfo（profile）{变量btnLogin=文档.getElementById（'btn-login'）；变量btnLogout=文档.getElementById（'btn-logout'）；变量化身=文档.getElementById（"化身"）；文档.getElementById（'nickname'）.textContent=个人资料.昵称;btnLogin.style.display="无"；头像.src= 个人资料.picture;头像.style.display="块"；btnLogout.style.display.显示="块"；}函数retrieveProfile（）{变量ID标记=localStorage.getItem（'id_token'）；if（idToken）{试试看{const profile=jwt_解码（idToken）；显示配置文件信息（profile）；}接住（错误）{alert（'获取配置文件时出错：'+错误消息);}}}auth0.parseHash(窗口.位置.哈希，（错误，结果）=>{如果（错误| |！结果）{//处理错误返回；}//您可以使用ID令牌在前端获取用户信息。localStorage.setItem（'身份证'，result.idToken);//您可以使用此令牌与服务器端api交互。localStorage.setItem（"访问令牌"，result.accessToken);检索配置文件（）；});函数后加载（）{//按钮Btnlo值=文档.getElementById（'btn-login'）；变量btnLogout=文档.getElementById（'btn-logout'）；btnLogin.addEventListener（"单击"，功能（）{auth0.authorize（）；});btnL公司