Encore 0.21.0: Webpack 4支持，复制文件支持，WebpackEncoreBundle

WebpackEncoreBundle & encore_entry_script_tags()

除了Webpack 4本身的升级(如下所述)，最显著的变化是创建了一个新的包:WebpackEncoreBundle．如果您之前安装了ob娱乐下载symfony / webpack-encore-pack，你可以删除它并安装这个bundle:

1 2

作曲家需要symfony/webpob娱乐下载ack-encore-bundle删除symfony/webpack-encore-pack

注意这里没有——开发国旗为ob娱乐下载symfony / webpack-encore-bundle．这是有意为之:它包含了一个新特性，可以更容易地包含脚本而且链接条目的标签:

12 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

{/…/ checkout.html #模板。树枝#}{%块javascripts %}{{父（）}}——< script src = "{{资产(“构建/ checkout.js”)}}" > < /脚本>+ {{encore_entry_script_tags('checkout')}}{% endblock %} {% block样式表%}{{parent()}}-  .+ {{encore_entry_link_tags('checkout')}}{% endblock %}

为什么我们要增加这些功能?因为使用这些函数会给你版本控制而且CDN支持免费的，以及启用新的“拆分块”功能，如下所述。

Webpack 4, Babel 7和主要升级

此版本的主要重点是升级Encore以使用最新版本的Webpack和Babel。Webpack 4包含了一长串改进——比如更快的构建时间和一种将构建文件“分割”为更优化的片段的新方法(后面会详细介绍)。Babel 7也是一个巨大的版本-它包含优化和支持(通过@babel / preset-env)browserslist(稍后会详细介绍)。

其他几个库也进行了升级-请参阅更新日志详情如下。如果您只使用Encore的功能，那么这些主要版本升级应该不会有任何问题。如果您添加了自定义特性，请确保检查每个库的更改。

splitChunks() & encore_entry_script_tags()

Webpack 4最大的创新之一是SplitChunksPlugin．这解决了多个编译后的条目文件之间存在重复代码的问题。在Webpack 4之前，这个问题在Encore中通过createSharedEntry ()方法。这种方法不会很快消失，但是Webpack现在有了一个更好的选择。

Encore 0.21.0增加了一个新的splitEntryChunks ()方法。启用此功能后，Webpack的SplitChunksPlugin将使用优化算法自动将最终的JavaScript和CSS文件“分割”成多个片段。例如，通常会输出一个名为“app”的条目app.js而且app.css文件。但随着splitEntryChunks ()，则输出app.js而且供应商~ app.js(其中将包含由其他入口文件共享的代码)以及app.css而且供应商~ app.css．

但这意味着你可能需要多个脚本而且链接模板中的标签!为了解决这个问题，Encore输出一个新的entrypoints.json包含每个“条目”所需的所有JavaScript和CSS文件的文件。新的WebpackEncoreBundle Twig函数知道如何读取:

12 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

{/…/ checkout.html #模板。树枝#}{%块javascripts %}{{父（）}}{#现在可以呈现多个脚本标签:   #}{{encore_entry_script_tags('checkout')}}{%endblock%}{%块样式表%}{{父（）}}{#现在可以呈现多个链接标签:  #}{{encore_entry_link_tags('checkout')}}{%endblock%}

就是这样!Webpack将智能地“分割”您的入口文件和正确的脚本而且链接标签总是会被呈现。的manifest.json文件仍然是由Encore输出，但只有当你需要引用静态资产(如图像)从你的Twig模板通过资产()函数。

新建runtime.js文件

这个版本的Encore还引入了一个可选的新输出文件runtime.js．您应该通过调用其中一个显式地启用或禁用它enableSingleRuntimeChunk ()或disableSingleRuntimeChunk ()．如果你启用它，一个新的runtime.js文件将被输出，并需要包含在您的页面中(但是encore_entry_script_tags ()会自动处理)

有什么意义runtime.js？假设您在同一页面上包含多个入口JavaScript文件—就像一个app.js在你的布局和checkout.js当你在结帐页面时。然后:

• 与enableSingleRuntimeChunk ():如果相同的模块(例如。jquery)是两个输入文件所需要的，则它们将需要相同对象。
• 与disableSingleRuntimeChunk ():如果相同的模块(例如。jquery)，则每个输入文件都会收到一个不同的对象。

使用enableSingleRuntimeChunk ()会给你与Webpack 3相同的行为，但你可以选择哪个设置更适合你的应用程序。

新增copyFiles()特性

Encore中最需要的功能之一是能够将静态文件复制到构建目录中。到目前为止，我们建议使用copy-webpack-plugin．这个插件很棒，但是如果您在文件名中使用版本散列，则manifest.json文件将不包含此复制文件的正确密钥(密钥将是版本化/散列的文件名)。实际上，这使得不可能用文件名散列来对复制的文件进行版本控制。

为了解决这个问题，安可现在有一个拷贝文件()方法!它很简单:用它来复制文件从一个目录(例如。资产/图片)到你的“build”目录。如果启用了版本控制，则所有文件都被赋予版本散列名称并包含在manifest.json方法获取正确的文件名资产()在Twig的功能。

异步代码拆分

你知道Webpack允许你异步地要求模块吗?只有什么时候需要他们?这个特性被称为代码分离．它并不新鲜，但在最新版本的Encore中，你可以在没有任何额外配置的情况下使用它:

1 2 3 4 5 6 7

$ (“.js-open-video”)内(“点击”，函数（）｛//异步加载VideoPlayer模块进口（“/组件/放像机。”) (（｛默认的: VideoPlayer}) = >｛//一旦它加载，使用它!常量球员=新放像机(某个元素的）;});})；

browserslist支持

Encore中有几个工具可以帮助您了解站点需要支持的浏览器版本。例如，如果您需要支持旧浏览器，Babel和autoprefixer(来自PostCSS)将以不同的方式编译代码。

到目前为止，还没有一个地方可以配置这个。但是，多亏了升级@babel / preset-env，您现在可以通过browserslist关键在package.json．

有关详细信息，请参见browserslist文欧宝官网下载app件Encore．

支持丑陋ES6代码

在此版本之前，Uglify(用于生产的最小化JavaScript库)无法处理ES6代码。这意味着您必须将所有JavaScript转换为ES5代码，即使您的站点不需要支持旧的浏览器。

正因为如此，Uglify被替换为要简洁- Uglify的一个分支，处理ES6代码。你应该不会注意到你的应用程序有任何不同，除非你使用configureUglifyJsPlugin ()(使用方法configureTerserPlugin ()现在)。

准备升级了吗?

因为这是一个大版本，升级需要几个步骤:

1. 通过作曲家需要symfony/webpob娱乐下载ack-encore-bundle
2. 删除webpack-encore-pack通道作曲家删除symfony/webob娱乐下载pack-encore-pack
3. 更新您的版本约束package.json为@ob娱乐下载symfony / webpack-encore来^ 0.21.0
4. 运行纱升级
5. 更换手册脚本而且链接标签与新的encore_entry_script_tags ()而且encore_entry_link_tags ()功能。

并且，随着时间的推移，替换createdSharedEntry ()与splitEntryChunks ()．如果你有任何问题，请在ob娱乐下载symfony / webpack-encore库．

享受吧!