WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:01.216 --> 00:00:06.086 align:middle When we installed Webpack Encore, its recipe gave us this new assets/ directory. 00:00:06.746 --> 00:00:08.836 align:middle Check out the app.js file. 00:00:09.636 --> 00:00:10.376 align:middle Interesting. 00:00:10.746 --> 00:00:13.786 align:middle Notice how it imports this bootstrap file. 00:00:14.286 --> 00:00:18.946 align:middle That's actually bootstrap.js: this file right here. 00:00:18.946 --> 00:00:20.906 align:middle The .js extension is optional. 00:00:21.646 --> 00:00:25.876 align:middle This is one of the most important things that Webpack gives us: 00:00:26.156 --> 00:00:30.846 align:middle the ability to import one JavaScript file from another. 00:00:31.476 --> 00:00:34.066 align:middle We can import functions, objects... 00:00:34.326 --> 00:00:36.376 align:middle really anything from another file. 00:00:36.946 --> 00:00:41.086 align:middle We're going to talk more about this bootstrap.js file in a little bit. 00:00:42.206 --> 00:00:45.156 align:middle This also imports a CSS file!? 00:00:45.686 --> 00:00:47.966 align:middle If you haven't seen this before, it might look... 00:00:47.966 --> 00:00:50.786 align:middle weird: JavaScript importing CSS? 00:00:51.766 --> 00:00:56.536 align:middle To see how this all works, in app.js, add a console.log(). 00:00:58.106 --> 00:01:01.116 align:middle And app.css already has a body background... 00:01:01.736 --> 00:01:06.966 align:middle but add an !important so that we can definitely see if this is being loaded. 00:01:07.976 --> 00:01:11.066 align:middle Ok... so who reads these files? 00:01:11.586 --> 00:01:12.026 align:middle Because... 00:01:12.136 --> 00:01:15.056 align:middle they don't live in the public/ directory... 00:01:15.336 --> 00:01:20.586 align:middle so we can't create script or link tags that point directly to them. 00:01:21.616 --> 00:01:25.376 align:middle To answer that, open webpack.config.js. 00:01:26.176 --> 00:01:31.986 align:middle Webpack Encore is an executable binary: we're going to run it in a minute. 00:01:32.636 --> 00:01:36.796 align:middle When we do, it will load this file to get its config. 00:01:37.836 --> 00:01:43.556 align:middle And while there are a lot of features inside of Webpack, the only thing we need to focus 00:01:43.556 --> 00:01:46.536 align:middle on right now is this one: addEntry(). 00:01:47.426 --> 00:01:49.436 align:middle This app could be anything... 00:01:49.646 --> 00:01:52.136 align:middle like dinosaur, it doesn't matter. 00:01:52.616 --> 00:01:54.596 align:middle I'll show you how that's used in a minute. 00:01:55.436 --> 00:02:00.846 align:middle The important thing is that it points to the assets/app.js file. 00:02:01.736 --> 00:02:08.946 align:middle Because of this, app.js will be the first and only file that Webpack will parse. 00:02:09.396 --> 00:02:15.746 align:middle It's pretty cool: Webpack will reads the app.js file and then follow all 00:02:15.746 --> 00:02:22.006 align:middle of the import statements recursively until it finally has a giant collection 00:02:22.006 --> 00:02:25.926 align:middle of all the JavaScript and CSS our app needs. 00:02:26.326 --> 00:02:30.076 align:middle Then, it will write that into the public/ directory. 00:02:30.996 --> 00:02:32.156 align:middle Let's see it in action. 00:02:32.436 --> 00:02:38.846 align:middle Find your terminal and run: yarn watch This is, as it says, 00:02:39.126 --> 00:02:42.766 align:middle a shortcut for running encore dev -- watch. 00:02:43.846 --> 00:02:49.226 align:middle If you look at your package.json file, it came with a script section with some shortcuts. 00:02:51.306 --> 00:02:53.916 align:middle Anyways, yarn watch does two things. 00:02:54.296 --> 00:03:04.746 align:middle First, it created a new public/build/ directory and, inside, app.css and app.js files! 00:03:05.376 --> 00:03:10.356 align:middle But don't let the names fool you: app.js contains a lot more 00:03:10.356 --> 00:03:14.396 align:middle that just what's inside assets/app.js: 00:03:14.966 --> 00:03:19.746 align:middle it contains all the JavaScript from all the imports it finds. 00:03:20.476 --> 00:03:24.566 align:middle app.css contains all the CSS from all the imports. 00:03:25.516 --> 00:03:32.166 align:middle The reason these files are called app.css and app.js is because of the entry name. 00:03:32.776 --> 00:03:38.046 align:middle So the takeaway is that, thanks to Encore, we suddenly have new files 00:03:38.046 --> 00:03:45.356 align:middle in a public/build/ directory that contain all the JavaScript and CSS our app needs! 00:03:46.326 --> 00:03:50.236 align:middle And if you move over to your homepage and refresh... 00:03:50.756 --> 00:03:53.376 align:middle woh! It instantly worked!? 00:03:54.146 --> 00:03:55.546 align:middle The background changed... 00:03:55.826 --> 00:03:57.336 align:middle and in my inspector... 00:03:57.726 --> 00:03:59.366 align:middle there's the console log! 00:03:59.796 --> 00:04:01.416 align:middle How the heck did that happen? 00:04:02.306 --> 00:04:07.276 align:middle Open your base layout: templates/base.html.twig. 00:04:08.016 --> 00:04:15.436 align:middle The secret is in the encore_entry_link_tags() and encore_entry_script_tags() functions. 00:04:16.266 --> 00:04:22.636 align:middle I bet you can guess what these do: add the link tag to build/app.css 00:04:22.846 --> 00:04:25.286 align:middle and the script tag to build/app.js. 00:04:25.286 --> 00:04:28.396 align:middle You can see this in your browser. 00:04:28.756 --> 00:04:31.166 align:middle View the source for the page and... 00:04:31.416 --> 00:04:35.486 align:middle yup! The link tag for /build/app.css... 00:04:35.716 --> 00:04:39.136 align:middle and script tag for /build/app.js. 00:04:40.436 --> 00:04:43.726 align:middle Oh, but it also rendered two other script tags. 00:04:44.286 --> 00:04:46.926 align:middle That's because Webpack is really smart. 00:04:47.456 --> 00:04:53.166 align:middle For performance purposes, instead of dumping one gigantic app.js file, 00:04:53.546 --> 00:04:58.396 align:middle sometimes Webpack will split it into multiple, smaller files. 00:04:59.566 --> 00:05:04.266 align:middle Fortunately, these Encore Twig functions are smart enough to handle that: 00:05:04.266 --> 00:05:08.476 align:middle it will include all the link or script tags needed. 00:05:09.426 --> 00:05:15.606 align:middle The most important thing is that the code that we have in our assets/app.js file - 00:05:16.076 --> 00:05:22.186 align:middle including anything it imports - is now functioning and showing up on our page! 00:05:23.256 --> 00:05:27.206 align:middle Oh, and because we ran yarn watch, Encore is still running 00:05:27.206 --> 00:05:29.196 align:middle in the background watching for changes. 00:05:29.196 --> 00:05:32.576 align:middle Check it out: go into app.css... 00:05:32.986 --> 00:05:34.896 align:middle and change the background color. 00:05:36.686 --> 00:05:39.066 align:middle Save, move over and refresh. 00:05:39.246 --> 00:05:42.596 align:middle It instantly updated! 00:05:43.266 --> 00:05:49.506 align:middle That's because Encore noticed the change and recompiled the built file really quickly. 00:05:50.906 --> 00:05:57.156 align:middle Next: let's move our existing CSS into the new system and learn how we can install 00:05:57.156 --> 00:06:00.926 align:middle and import third party libraries - look Bootstrap 00:06:00.926 --> 00:06:04.116 align:middle or FontAwesome - right into our Encore setup.