WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:02.806 --> 00:00:06.676 align:middle Create a new file: webpack.config.js. 00:00:07.706 --> 00:00:13.786 align:middle Here's how Webpack works: we create a config file that tells it which file to load, 00:00:14.146 --> 00:00:17.726 align:middle where to save the final file, and a few other things. 00:00:18.026 --> 00:00:19.646 align:middle Then... it does the rest! 00:00:20.336 --> 00:00:24.636 align:middle But... Webpack's configuration is complex. 00:00:25.226 --> 00:00:32.966 align:middle A fully-featured setup will probably be a few hundred lines of complicate config! 00:00:33.196 --> 00:00:37.226 align:middle Heck, our Webpack tutorial was over 3 hours long! 00:00:38.096 --> 00:00:43.306 align:middle Very simply: Encore is a tool that helps generate that complex config. 00:00:44.206 --> 00:00:47.076 align:middle Click on the documentation to find the "First Example". 00:00:48.346 --> 00:00:51.946 align:middle Hey! A webpack.config.js file to get us started! 00:00:52.666 --> 00:00:53.156 align:middle Copy that! 00:00:53.736 --> 00:00:55.336 align:middle Then, paste it in our file. 00:00:56.426 --> 00:01:01.656 align:middle But, I'm going to simplify and delete a few things: we'll add this stuff back later. 00:01:02.806 --> 00:01:07.416 align:middle Just keep setOutputPath(), setPublicPath() and addEntry(). 00:01:08.556 --> 00:01:11.126 align:middle And hey, check out that first line! 00:01:11.996 --> 00:01:18.366 align:middle Since this file will be executed by Node, we can require stuff! 00:01:18.366 --> 00:01:20.556 align:middle This imports the Encore object. 00:01:21.116 --> 00:01:27.006 align:middle Then, at the bottom, we ask Encore to give us the final config, and we export it. 00:01:28.046 --> 00:01:32.776 align:middle There are only three things we need to tell Webpack: the directory where we want 00:01:32.776 --> 00:01:38.346 align:middle to save the final files - public/build - the public path to that directory - 00:01:38.676 --> 00:01:44.526 align:middle so /build since public/ is the document root - and an "entry". 00:01:45.486 --> 00:01:48.656 align:middle Point this to our JavaScript file: . 00:01:48.656 --> 00:01:53.566 align:middle /public/assets/js/RepLogApp.js. 00:01:55.376 --> 00:01:58.626 align:middle Change the first argument to rep_log. 00:01:59.776 --> 00:02:03.726 align:middle This tells Webpack to work its magic on RepLogApp.js. 00:02:05.076 --> 00:02:14.176 align:middle The first argument will be the name of the final file, .js - so rep_log.js. 00:02:14.176 --> 00:02:15.226 align:middle And... that's it! 00:02:15.226 --> 00:02:16.876 align:middle Find your terminal. 00:02:18.106 --> 00:02:20.356 align:middle Encore has its own executable. 00:02:20.876 --> 00:02:22.076 align:middle To use it, run: . 00:02:22.586 --> 00:02:31.806 align:middle /node_modules/.bin/encore dev The "dev" part tells Encore to create a "development" build. 00:02:32.786 --> 00:02:33.976 align:middle And... cool! 00:02:34.626 --> 00:02:36.956 align:middle Two files written to public/build. 00:02:37.916 --> 00:02:38.836 align:middle Let's check them out! 00:02:41.606 --> 00:02:44.596 align:middle Alright! There's rep_log.js. 00:02:45.676 --> 00:02:48.146 align:middle We'll talk about manifest.json later. 00:02:49.106 --> 00:02:53.056 align:middle Cool! Let's point our script tag at the new file. 00:02:53.806 --> 00:02:58.016 align:middle Open templates/lift/index.html.twig. 00:02:58.706 --> 00:03:01.746 align:middle This is the template that runs our main page. 00:03:05.586 --> 00:03:10.216 align:middle At the bottom, change the path to build/rep_log.js. 00:03:10.216 --> 00:03:17.336 align:middle If you're not a Symfony user, don't worry, the asset() function isn't doing anything special. 00:03:18.906 --> 00:03:20.616 align:middle Ok, let's try it! 00:03:20.616 --> 00:03:23.706 align:middle Find your browser and, refresh! 00:03:24.216 --> 00:03:26.356 align:middle Woo! It works! 00:03:27.016 --> 00:03:29.786 align:middle People, this is amazing! 00:03:30.236 --> 00:03:37.386 align:middle We can finally organize JavaScript into multiple files and not worry about "forgetting" 00:03:37.716 --> 00:03:39.586 align:middle to add all the script tags we need. 00:03:40.466 --> 00:03:43.896 align:middle The require function is a game-changer! 00:03:43.956 --> 00:03:51.046 align:middle If you look at the compiled rep_log.js file, you can see a bunch of Webpack code at the top, 00:03:51.396 --> 00:03:53.776 align:middle which helps things work internally - and... 00:03:54.226 --> 00:03:55.986 align:middle below, our code! 00:03:56.876 --> 00:04:00.406 align:middle It's not minimized because this is a development build. 00:04:00.986 --> 00:04:02.796 align:middle We'll talk about production builds later. 00:04:02.796 --> 00:04:07.656 align:middle If you're using PhpStorm like me, there are a few things we can do 00:04:07.656 --> 00:04:10.456 align:middle to make our life much more awesome. 00:04:11.216 --> 00:04:14.336 align:middle Open Preferences and search for ECMAScript. 00:04:17.806 --> 00:04:24.046 align:middle Under "Languages & Frameworks -> JavaScript", make sure that ECMAScript 6 is selected. 00:04:25.176 --> 00:04:30.026 align:middle Then, search for "Node" and find the "Node.js and NPM" section. 00:04:30.926 --> 00:04:34.436 align:middle Click to "Enable" the Node.js Core library. 00:04:36.036 --> 00:04:39.616 align:middle And finally, if you're using Symfony, search for Symfony. 00:04:40.486 --> 00:04:45.616 align:middle If you don't see a Symfony section, you should totally download the Symfony plugin - 00:04:46.146 --> 00:04:48.856 align:middle we have some details about this in a different screencast. 00:04:50.076 --> 00:04:56.176 align:middle Make sure it's enabled, and - most importantly - change the web directory to public. 00:04:57.236 --> 00:05:00.236 align:middle This will give auto-completion on the asset function. 00:05:02.676 --> 00:05:03.596 align:middle Back to Encore! 00:05:04.176 --> 00:05:10.196 align:middle There's one big bummer when introducing a "build" system for JavaScript like we just did: 00:05:11.206 --> 00:05:15.826 align:middle each time you change a file, you will need to re-run Encore! 00:05:16.546 --> 00:05:21.286 align:middle Lame! That's why Encore has a fancy "watch" option. 00:05:22.616 --> 00:05:32.716 align:middle Run: ./node_module/.bin/encore dev -- watch This will build, but now it's watching for changes! 00:05:33.456 --> 00:05:35.876 align:middle Let's just add a space here and save. 00:05:37.246 --> 00:05:40.886 align:middle Yes! Encore already re-built the files. 00:05:41.516 --> 00:05:43.886 align:middle Stop this whenever you want with Ctrl+C. 00:05:44.796 --> 00:05:51.476 align:middle Oh, and since this command is long, there's a shortcut: yarn run encore dev ... 00:05:54.236 --> 00:05:54.956 align:middle or, better... 00:05:55.206 --> 00:05:57.506 align:middle use the -- watch flag. 00:05:59.706 --> 00:06:01.476 align:middle Great! But... 00:06:01.476 --> 00:06:02.676 align:middle sometimes... 00:06:03.076 --> 00:06:05.166 align:middle we're going to make mistakes. 00:06:05.776 --> 00:06:08.186 align:middle Yes, I know, it's hard to imagine. 00:06:09.046 --> 00:06:10.616 align:middle Let's make a syntax error. 00:06:11.296 --> 00:06:13.656 align:middle Back at the terminal, woh! 00:06:14.246 --> 00:06:15.846 align:middle The build failed! 00:06:16.636 --> 00:06:21.286 align:middle But if you weren't watching the terminal closely, you might not realize this happened! 00:06:22.116 --> 00:06:22.856 align:middle No problem! 00:06:23.286 --> 00:06:26.196 align:middle Let's enable a build notification system! 00:06:26.856 --> 00:06:32.426 align:middle In webpack.config.js, just add enableBuildNotifications(). 00:06:33.536 --> 00:06:40.116 align:middle The "watch" functionality has one weakness: whenever you update webpack.config.js, 00:06:40.396 --> 00:06:44.726 align:middle you'll need to restart Encore before it sees those changes. 00:06:45.476 --> 00:06:51.676 align:middle So... stop it and run Encore again: Bah, error! 00:06:52.416 --> 00:06:53.066 align:middle Scroll up! 00:06:54.246 --> 00:06:58.566 align:middle Check this out, it says: Install webpack-notifier 00:06:58.776 --> 00:07:04.006 align:middle to use enableBuildNotifications() And then it tells us to run a command. 00:07:05.126 --> 00:07:09.496 align:middle Cool! Encore has a ton of features... 00:07:10.116 --> 00:07:16.896 align:middle but to stay light, it doesn't ship with the all of the dependencies for these optional features. 00:07:17.686 --> 00:07:23.336 align:middle But, it's no problem: if you need to install something, Encore will tell you. 00:07:24.406 --> 00:07:25.916 align:middle Copy that command and run: 00:07:26.406 --> 00:07:37.286 align:middle yarn add webpack-notifier -- dev Run encore again: It works! 00:07:37.606 --> 00:07:40.146 align:middle And cool! A desktop notification. 00:07:41.086 --> 00:07:42.706 align:middle Now, make a mistake! 00:07:45.536 --> 00:07:48.016 align:middle Yes! An obvious build error. 00:07:48.016 --> 00:07:50.156 align:middle Fix it and... 00:07:50.646 --> 00:07:52.386 align:middle build successful! 00:07:53.116 --> 00:07:56.356 align:middle Ok, we've got a pretty sweet system already. 00:07:56.876 --> 00:08:00.406 align:middle But Webpack is going to let us do so much more.