WEBVTT

NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com

00:00:02.056 --> 00:00:07.096 align:middle
Encore is outputting app.css and
app.js thanks to the app entry.

00:00:08.076 --> 00:00:15.096 align:middle
And we successfully added the <link> tag for
app.css and, down here, the <script> for app.js.

00:00:15.096 --> 00:00:22.536 align:middle
But when you use Encore with Symfony, you
won't render script and link tags by hand.

00:00:22.896 --> 00:00:29.116 align:middle
No way! We're going to be way lazier, and use
some helper functions from WebpackEncoreBundle.

00:00:29.926 --> 00:00:35.546 align:middle
For the stylesheets, use {{
encore_entry_link_tags() }} and pass it app,

00:00:36.226 --> 00:00:37.906 align:middle
because that's the name of the entry.

00:00:37.906 --> 00:00:43.486 align:middle
At the bottom, replace the script
tag with almost the same thing:

00:00:43.956 --> 00:00:45.966 align:middle
{{ encore_entry_script_tags('app') }}.

00:00:47.526 --> 00:00:49.586 align:middle
Move over and refresh to try this.

00:00:50.046 --> 00:00:53.856 align:middle
Wow! This made absolutely no difference!

00:00:54.276 --> 00:00:57.296 align:middle
The <link> tag on top looks exactly the same.

00:00:58.116 --> 00:00:59.896 align:middle
And... if I search for "script"...

00:01:00.386 --> 00:01:03.466 align:middle
yep! That's identical to what we had before.

00:01:04.146 --> 00:01:05.806 align:middle
So... why?

00:01:06.246 --> 00:01:08.406 align:middle
Or maybe better, how?

00:01:09.136 --> 00:01:13.186 align:middle
Is it just taking the app and
turning it into build/app.js?

00:01:13.186 --> 00:01:16.696 align:middle
Not quite...

00:01:17.046 --> 00:01:19.216 align:middle
it's a bit more interesting than that.

00:01:19.216 --> 00:01:26.546 align:middle
In the public/build directory, Encore generates
a very special file called entrypoints.json.

00:01:27.106 --> 00:01:34.186 align:middle
This is a map from each entry name to the CSS
and JS files that are needed to make it run.

00:01:34.776 --> 00:01:38.716 align:middle
If you were listening closely,
I just said two strange things.

00:01:39.496 --> 00:01:42.396 align:middle
First, we only have one entry right now.

00:01:42.816 --> 00:01:49.766 align:middle
But yes, we will eventually have multiple
entries to power page-specific CSS and JS.

00:01:50.396 --> 00:01:59.766 align:middle
Second, for performance, eventually Webpack may
split a single entry into multiple JavaScript

00:01:59.766 --> 00:02:04.446 align:middle
and CSS files and we will need
multiple script and link tags.

00:02:04.956 --> 00:02:06.236 align:middle
We'll talk more about that later.

00:02:06.546 --> 00:02:10.796 align:middle
The important thing right now
is: we have these handy helpers

00:02:10.796 --> 00:02:14.126 align:middle
that output the exact link
and script tags we need...

00:02:14.526 --> 00:02:16.446 align:middle
even if we need multiple.

00:02:17.776 --> 00:02:19.206 align:middle
Ok, back to Encore.

00:02:19.816 --> 00:02:23.736 align:middle
Because it's a build tool, each
time you make a change to anything,

00:02:23.826 --> 00:02:27.286 align:middle
you need to rebuild: That's lame.

00:02:27.736 --> 00:02:31.866 align:middle
So, of course, Webpack also has a "watch" mode.

00:02:32.796 --> 00:02:40.076 align:middle
Re-run the same command but with -- watch
on the end: Encore boots up, builds and...

00:02:40.076 --> 00:02:42.366 align:middle
just chillls out and waits for more changes.

00:02:43.046 --> 00:02:43.936 align:middle
Let's test this.

00:02:44.496 --> 00:02:48.796 align:middle
In app.js, I think we need a
few more exclamation points.

00:02:49.626 --> 00:02:51.336 align:middle
Save, then check out the terminal.

00:02:51.976 --> 00:02:54.516 align:middle
Yea! It already rebuilt!

00:02:54.516 --> 00:02:56.866 align:middle
In your browser, refresh.

00:02:58.866 --> 00:03:01.526 align:middle
Boom! Extra exclamation points.

00:03:02.356 --> 00:03:04.956 align:middle
If that doesn't work for some
reason, do a force refresh.

00:03:06.206 --> 00:03:08.746 align:middle
But even that is too much work.

00:03:09.226 --> 00:03:11.096 align:middle
Press Ctrl+C to stop Encore.

00:03:11.596 --> 00:03:18.616 align:middle
Instead, just run: yarn watch That's
a shortcut to do the same thing.

00:03:18.826 --> 00:03:22.996 align:middle
You can even see it in the
output: encore dev -- watch.

00:03:23.846 --> 00:03:24.996 align:middle
But there's no magic here.

00:03:26.236 --> 00:03:27.716 align:middle
Open up package.json.

00:03:28.316 --> 00:03:34.066 align:middle
We got this file from the recipe when we
installed the WebpackEncoreBundle via Composer.

00:03:34.996 --> 00:03:36.776 align:middle
See this scripts section?

00:03:37.366 --> 00:03:43.186 align:middle
This is a feature of yarn and npm: you can add
"shortcut" commands to make your life easier.

00:03:43.756 --> 00:03:47.206 align:middle
yarn watch maps to encore dev -- watch.

00:03:47.926 --> 00:03:52.566 align:middle
Later, we'll use yarn build to
generate our assets for production.

00:03:53.436 --> 00:03:58.116 align:middle
With all this done, let's get back to
the core of why Webpack is awesome:

00:03:58.626 --> 00:04:01.546 align:middle
being able to import and
require other JavaScript.

00:04:01.756 --> 00:04:02.686 align:middle
That's next.