配置安可/ Webpack

Encore中的所有内容都是通过webpack.config.js文件在您的项目的根。它已经包含了你需要的基本配置:

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

/ / webpack.config.js常量安可=需要（“@ob娱乐下载symfony / webpack-encore”）;再来一个//存放已编译资产的目录.setOutputPath (“公共/构建/”）// web服务器访问输出路径所使用的公共路径.setPublicPath (/构建的) .addEntry (“应用程序”，“/资产/ app.js。”）/ /……；/ /……

的关键部分是addEntry ():这告诉Encore加载资产/ app.js文件和跟踪所有的要求()语句。然后它会把所有东西打包在一起，感谢第一个应用程序参数-输出finalapp.js而且app.css文件放入公共/构建目录中。

要构建资产，运行:

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

#编译一次资产＄纱线返场开发如果你更喜欢npm，运行:＄运行开发#或，当文件更改时自动重新编译资产＄纱线返场开发——看如果你更喜欢npm，运行:＄NPM运行监视# on deploy，创建一个产品版本＄纱线返场生产如果你更喜欢npm，运行:＄NPM运行构建

恭喜!你现在有三个新文件:

• 公共/构建/ app.js(保存你的“app”条目的所有JavaScript代码)
• 公共/构建/ app.css(保存你的“app”条目的所有CSS)
• 公共/构建/ runtime.js(一个帮助Webpack完成工作的文件)

接下来，将这些包含在基本布局文件中。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 25 26

{/ base.html #模板。树枝#}<！文档类型超文本标记语言><超文本标记语言><头><！——……-->{%块样式表%}{# 'app'必须匹配webpack.config.js中addEntry()的第一个参数{{encore_entry_link_tags('app')}}<！——渲染一个链接标签(如果你的模块需要任何CSS) ——> . CSS{%endblock%}{%块javascripts %}{{encore_entry_script_tags('app')}}<！——渲染app.js & webpack runtime.js文件 参见下面关于"defer"属性的说明——> .js{%endblock%}头><！——……-->超文本标记语言>

就是这样!当你刷新你的页面时，所有的JavaScript资产/ app.js-以及它包含的任何其他JavaScript文件-将被执行。还将显示所需的所有CSS文件。

的encore_entry_link_tags ()而且encore_entry_script_tags ()从entrypoints.json由Encore生成的文件，以知道要渲染的确切文件名。这个文件是特别是有用是因为你可以启用版本控制或将资产指向CDN不作任何对模板的更改:路径entrypoints.json永远都是最终正确的道路。如果你用splitEntryChunks ()(Webpack将输出拆分为更多的文件)，所有必要的脚本而且链接标签将自动呈现。

如果你不使用Symfob娱乐下载ony，您可以忽略entrypoints.json文件并指向最终，直接构建文件。entrypoints.json仅对某些可选特性必需。

需要JavaScript模块

Webpack是一个模块捆绑器，这意味着你可以进口其他JavaScript文件。首先，创建一个导出函数的文件:

1 2 3 4

/ /资产/ greet.js出口默认的函数（的名字）｛返回“溜溜球${名称}-欢迎来到安可!｀；}；

我们将使用jQuery在页面上打印这条消息。安装方法:

1

＄Yarn添加jquery

太棒了!使用进口进口jquery而且greet.js：

12 3 4 5 6 7 8 9 10 11 12 13

// assets/app.js //…+ //从node_modules加载jquery包+ jquery导入jquery;+ //从greet.js导入函数(.js扩展名是可选的)+ // ./(或../)表示查找本地文件+ import greet from './greet';+ $(document).ready(function() {+ $(身体).prepend(“< h1 >”+问候(“吉尔”)+ < / h1 >);+});

就是这样!如果你以前参加过返场开发——观看，您的最终，构建文件已经更新:jQuery和greet.js已自动添加到输出文件(app.js)．刷新查看消息!

特定于页面的JavaScript或CSS(多个条目)

到目前为止，你只有一个JavaScript文件:app.js．对于小型应用程序或SPA(单页应用程序)，这可能很好!然而，随着应用程序的发展，你可能需要特定于页面的JavaScript或CSS(例如checkout, account等)。要处理这个问题，为每个页面创建一个新的“入口”JavaScript文件:

1 2

/ /资产/ checkout.js//结帐页面的自定义代码

1 2

/ /资产/ account.js//自定义代码为您的帐户页面

下一步,使用addEntry ()告诉Webpack在构建时读取这两个新文件:

1 2 3 4 5 6 7

/ / webpack.config.js安可/ /….addEntry(“应用程序”,“。/资产/ app.js”)+ . addentry ('checkout'， './assets/checkout.js')+ . addentry ('account'， './assets/account.js')/ /……

因为你刚刚改变了webpack.config.js文件，确保停止并重新启动Encore:

1

＄纱线运行返场开发——看

Webpack现在将输出一个新的checkout.js文件和一个新的account.js文件在构建目录中。如果这些文件需要/导入CSS, Webpack也会这样做也输出checkout.css而且account.css文件。

最后，包括脚本而且链接标签在你需要它们的个别页面上:

12 3 4 5 6 7 8 9 10 11 12

{/…/ checkout.html #模板。枝条#}{%扩展'base.html。嫩枝' %}+{%块样式表%}+ {{parent()}}+ {{encore_entry_link_tags('checkout')}}+ {% endblock %}+ {% block javascript %}+ {{parent()}}+ {{encore_entry_script_tags('checkout')}}+ {% endblock %}

现在，结帐页面将包含所有JavaScript和CSS应用程序条目(因为它包含在base.html.twig这就是{{parent()}}调用)而且你的结帐条目。

看到创建特定页面的CSS/JS欲知详情。若要避免在不同的输入文件中重复相同的代码，请参见通过将共享代码“分割”到单独的文件来防止复制．

使用Sass /不/笔

你已经掌握了安可的基本知识。好了!但是，有许多如果你需要，你可以选择更多的功能。例如，除了使用普通的CSS，你也可以使用Sass, LESS或Stylus。要使用Sass，请重命名app.css文件app.scss并更新进口声明:

1 2 3

/ /资产/ app.js- import ` ./styles/app.css `;+ import ` ./styles/app.scss `;

然后，告诉Encore启用Sass预处理器:

1 2 3 4 5 6

// webpack.config.js Encore //…+ .enableSassLoader ()；

因为你刚换了你的webpack.config.js文件，您需要重新启动安可。当您这样做时，您将看到一个错误!

1 2

>错误:安装sass-loader & sass使用enableSassLoader() > yarn添加sass-loader@^10.0.0 sass——dev

Encore支持许多特性。但是，当你需要一个功能时，Encore会告诉你需要安装什么，而不是把所有的功能都强加给你。运行:

1 2

＄Yarn添加sass-loader@^10.0.0 sass——dev＄纱线返场开发——看

您的应用程序现在支持Sass。Encore还支持LESS和Stylus。看到CSS预处理器:Sass, LESS, Stylus等。．

只编译CSS文件

如果你只想编译一个CSS文件，这是可能的通过addStyleEntry ()：

1 2 3 4 5 6

/ / webpack.config.js再来一个/ /…….addStyleEntry (“some_page”，”。/资产/风格/ some_page.css”);

这将输出一个newsome_page.css．

继续前进!

Encore支持更多的特性!有关您可以做什么的完整列表，请参见Encore的index.js文件．或者，回到返场文章列表．