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!