WEBVTT

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

00:00:01.006 --> 00:00:03.666 align:middle
This is all really nice...

00:00:03.706 --> 00:00:05.046 align:middle
but, so far...

00:00:05.306 --> 00:00:11.046 align:middle
it kinda looks like Webpack
only works for single-page apps!

00:00:11.046 --> 00:00:16.556 align:middle
I mean, if this were the only page in our
app, we could write all of our JavaScript

00:00:16.556 --> 00:00:20.126 align:middle
in the one entry file, require
what we need and...

00:00:20.286 --> 00:00:26.246 align:middle
be done! But even our small
app has another page: /login.

00:00:26.776 --> 00:00:29.866 align:middle
And this page has its own custom JavaScript....

00:00:30.176 --> 00:00:36.286 align:middle
which right now, is done in this boring,
old, non-Webpack-ified login.js file.

00:00:36.386 --> 00:00:42.206 align:middle
So... how can we also process
this file through Webpack?

00:00:43.046 --> 00:00:49.246 align:middle
We could require it from
rep_log.js, but that's wasteful!

00:00:49.806 --> 00:00:53.766 align:middle
We really only need this code on the login page.

00:00:54.546 --> 00:00:55.356 align:middle
The answer is...

00:00:55.636 --> 00:01:05.166 align:middle
so simple: add a second entry called login
that will load the assets/js/login.js file.

00:01:06.536 --> 00:01:11.266 align:middle
I want you to think of each entry
as a separate page on your site.

00:01:11.976 --> 00:01:18.576 align:middle
Or, you can think of each entry as a separate
JavaScript application that runs on your site.

00:01:19.216 --> 00:01:25.546 align:middle
Like, we have our main "rep log"
application and also our "login" application.

00:01:26.516 --> 00:01:28.686 align:middle
Because we just changed the webpack config,

00:01:29.166 --> 00:01:36.286 align:middle
go back and restart Encore:
And now we can improve things!

00:01:36.286 --> 00:01:39.796 align:middle
First, remove that self-executing function.

00:01:40.316 --> 00:01:47.556 align:middle
Then, more importantly, require the
dependencies we need: in this case jQuery

00:01:47.756 --> 00:01:51.286 align:middle
with const $ = require('jquery').

00:01:53.006 --> 00:01:53.546 align:middle
That's it!

00:01:54.106 --> 00:01:55.236 align:middle
Go back and...

00:01:55.236 --> 00:02:00.656 align:middle
refresh! Bah: require is not defined Boo!

00:02:01.016 --> 00:02:04.836 align:middle
My bad - I forgot to use the new built file.

00:02:05.566 --> 00:02:11.636 align:middle
Open templates/bundles/FOSUserBundle/Security
/login.html.twig.

00:02:15.076 --> 00:02:18.676 align:middle
Point the script tag to build/login.js.

00:02:21.136 --> 00:02:22.226 align:middle
And now...

00:02:22.566 --> 00:02:30.006 align:middle
it works! When I type a really login username,
this message appears thanks to that JavaScript.

00:02:30.736 --> 00:02:33.576 align:middle
But... there's one last problem.

00:02:34.236 --> 00:02:37.946 align:middle
Open the base layout file: base.html.twig.

00:02:39.046 --> 00:02:44.716 align:middle
Yep, we also include one
JavaScript file on every page.

00:02:45.396 --> 00:02:46.836 align:middle
It doesn't do much...

00:02:47.096 --> 00:02:51.106 align:middle
just adds a tooltip when you
hover over your username.

00:02:51.106 --> 00:02:54.326 align:middle
So... how do we handle this?

00:02:54.906 --> 00:02:58.326 align:middle
How can we Webpackify this file?

00:02:58.946 --> 00:03:02.956 align:middle
I mean, the layout is not its own page...

00:03:03.306 --> 00:03:06.306 align:middle
so... can it be its own entry?

00:03:07.146 --> 00:03:08.316 align:middle
The answer is...

00:03:08.596 --> 00:03:16.996 align:middle
yes! Add another entry called layout
and point it to assets/js/layout.js.

00:03:17.886 --> 00:03:23.636 align:middle
Here's the deal: usually you will
include exactly one script tag

00:03:23.806 --> 00:03:31.766 align:middle
for a built JavaScript file on each
page - like rep_log.js or login.js.

00:03:32.636 --> 00:03:38.196 align:middle
But, if you have some JavaScript that
should be included on every page,

00:03:38.576 --> 00:03:44.026 align:middle
you can think of that JavaScript
as its own, mini JS application.

00:03:44.976 --> 00:03:50.976 align:middle
In that case, you'll have two built
files per page: your layout JavaScript

00:03:51.346 --> 00:03:54.746 align:middle
and your page-specific JavaScript...

00:03:55.116 --> 00:03:56.866 align:middle
if you have any for that page.

00:03:58.166 --> 00:04:01.826 align:middle
Go back and restart Webpack
so it reads the new config.

00:04:02.876 --> 00:04:08.366 align:middle
But... let's not refactor this
file yet: we'll do that next.

00:04:10.006 --> 00:04:14.876 align:middle
In base.html.twig, use the
new file: build/layout.js.

00:04:16.296 --> 00:04:17.966 align:middle
Boom! Try it!

00:04:18.526 --> 00:04:19.456 align:middle
Refresh the page!

00:04:21.406 --> 00:04:24.276 align:middle
Yes! It still works.

00:04:26.036 --> 00:04:31.746 align:middle
Next, let's refactor layout.js to
remove the self-executing function

00:04:31.986 --> 00:04:33.796 align:middle
and require its dependencies.

00:04:34.216 --> 00:04:34.976 align:middle
But this time...

00:04:35.446 --> 00:04:36.926 align:middle
there's a surprise!