WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:00.036 --> 00:00:03.646 align:middle Yo friends! 00:00:03.966 --> 00:00:06.586 align:middle It's Webpack time! 00:00:06.946 --> 00:00:09.326 align:middle Yeeeeees! Well, maybe not super "yeeeeees!" 00:00:10.016 --> 00:00:14.966 align:middle if you are the person responsible for installing and configuring Webpack... 00:00:15.376 --> 00:00:19.606 align:middle Cause, woh, yea, that can be tough! 00:00:19.606 --> 00:00:22.576 align:middle Unless... you're using Webpack Encore! 00:00:23.246 --> 00:00:24.936 align:middle More about that in a few minutes. 00:00:25.566 --> 00:00:29.956 align:middle But first, I want you to know why you should care about Webpack... 00:00:30.606 --> 00:00:35.066 align:middle like super please-let-me-start-using-webpack-right-now-and 00:00:35.066 --> 00:00:37.416 align:middle -never-stop-using-it kind of care. 00:00:38.356 --> 00:00:44.876 align:middle Sure, technically, Webpack is just a tool to build & compile your JavaScript and CSS files. 00:00:45.206 --> 00:00:49.566 align:middle But, it will revolutionize the way you write JavaScript. 00:00:50.786 --> 00:00:53.166 align:middle The reason is right on their homepage! 00:00:53.606 --> 00:00:57.676 align:middle In PHP, we organize our code into small files that work together. 00:00:58.446 --> 00:01:04.816 align:middle But then, traditionally, in JavaScript, we just smash all our code into one gigantic file. 00:01:05.536 --> 00:01:10.796 align:middle Or, if we do split them up, it's still a pain because we then need to remember 00:01:10.796 --> 00:01:14.636 align:middle to go add a new script tag to every page that needs it... 00:01:15.256 --> 00:01:19.086 align:middle and those script tags need to be in just the right order. 00:01:19.086 --> 00:01:21.726 align:middle If they're not, kaboom! 00:01:22.536 --> 00:01:28.186 align:middle And even if you do have a build system like Gulp, you still need to manage keeping all 00:01:28.186 --> 00:01:31.306 align:middle of the files listed there and in the right order. 00:01:32.206 --> 00:01:38.196 align:middle How can our code be so nicely organized in PHP, but such a disaster in JavaScript? 00:01:39.146 --> 00:01:40.776 align:middle Webpack changes this. 00:01:40.776 --> 00:01:44.736 align:middle Suppose we have an index.js file but we want 00:01:44.736 --> 00:01:48.806 align:middle to organize a function into a different, bar.js file. 00:01:48.806 --> 00:01:54.746 align:middle Thanks to Webpack, you can "export" that function as a value from bar.js 00:01:54.746 --> 00:01:59.266 align:middle and then import and use it in index.js. 00:02:00.016 --> 00:02:04.016 align:middle Yes, we can organize our code into small pieces! 00:02:04.686 --> 00:02:10.636 align:middle Webpack's job is to read index.js, parse through all of the import statements it finds, 00:02:10.936 --> 00:02:15.176 align:middle and output one JavaScript file that has everything inside of it. 00:02:15.766 --> 00:02:18.396 align:middle Webpack is a huge over-achiever. 00:02:18.396 --> 00:02:20.206 align:middle So let's get to it! 00:02:20.726 --> 00:02:22.306 align:middle To import or... 00:02:22.416 --> 00:02:27.786 align:middle Webpack the maximum amount of knowledge from this tutorial, download the course code 00:02:27.786 --> 00:02:30.016 align:middle from this page and code along with me. 00:02:30.116 --> 00:02:34.706 align:middle After you unzip the file, you'll find a start/ directory 00:02:34.706 --> 00:02:37.706 align:middle that has the same code I have here: a Symfony 4 app. 00:02:38.536 --> 00:02:41.866 align:middle Open up the README.md file for all the setup details. 00:02:43.046 --> 00:02:48.026 align:middle The last step will be to open a terminal, move into the project and start a web server. 00:02:48.856 --> 00:02:51.386 align:middle I'm going to use the Symfony local web server, 00:02:51.786 --> 00:02:55.476 align:middle which you can get from https://symfony.com/download. 00:02:55.476 --> 00:03:01.306 align:middle Run it with: symfony serve Then, swing back over to your browser and open 00:03:01.306 --> 00:03:04.476 align:middle up http://localhost:8000 to see... 00:03:04.616 --> 00:03:05.946 align:middle The Space Bar! 00:03:06.396 --> 00:03:09.726 align:middle An app we've been working on throughout our Symfony series. 00:03:10.256 --> 00:03:13.566 align:middle And, we did write some JavaScript and CSS in that series... 00:03:13.836 --> 00:03:20.376 align:middle but we kept it super traditional: the JavaScript is pretty boring, and there are multiple files 00:03:20.686 --> 00:03:23.236 align:middle but each has its own script tag in my templates. 00:03:24.176 --> 00:03:26.436 align:middle This is not the way I really code. 00:03:26.636 --> 00:03:28.766 align:middle So, let's do this correctly. 00:03:28.766 --> 00:03:35.336 align:middle So even though both Webpack and Encore are node libraries, if you're using Symfony, 00:03:35.416 --> 00:03:38.286 align:middle you'll install Encore via composer... 00:03:38.896 --> 00:03:40.016 align:middle well... sort of. 00:03:41.086 --> 00:03:43.116 align:middle Open a new terminal tab and run: 00:03:43.356 --> 00:03:50.906 align:middle composer require encore This downloads a small bundle called WebpackEncoreBundle. 00:03:51.826 --> 00:03:56.936 align:middle Actually, Encore itself can be used with any framework or any language! 00:03:57.226 --> 00:04:02.176 align:middle But, it works super well with Symfony, and this thin bundle is part of the reason. 00:04:03.556 --> 00:04:08.136 align:middle This bundle also has a Flex recipe - oooooOOOOooo - 00:04:08.546 --> 00:04:10.936 align:middle which gives us some files to get started! 00:04:10.936 --> 00:04:15.286 align:middle If you want to use Webpack from outside of a Symfony app, 00:04:15.546 --> 00:04:18.306 align:middle you would just need these files in your app. 00:04:20.376 --> 00:04:23.136 align:middle Back in the editor, check out package.json. 00:04:24.506 --> 00:04:28.446 align:middle This is the composer.json file of the Node world. 00:04:29.306 --> 00:04:34.006 align:middle It requires Encore itself plus two optional packages that we'll use. 00:04:35.276 --> 00:04:40.676 align:middle To actually download these, go back to your terminal and run: yarn Or... 00:04:40.746 --> 00:04:44.546 align:middle yarn install if you're less lazy than me - it's the same thing. 00:04:45.256 --> 00:04:49.796 align:middle Node has two package managers - yarn and npm - I know, kinda weird - 00:04:49.916 --> 00:04:52.536 align:middle but you can install and use whichever you want. 00:04:53.336 --> 00:04:59.436 align:middle Anyways, this is downloading our 3 libraries and their dependencies into Node's version 00:04:59.496 --> 00:05:03.006 align:middle of the vendor/ directory: node_modules/. 00:05:04.196 --> 00:05:06.236 align:middle And... done! 00:05:06.926 --> 00:05:11.456 align:middle Congrats! You now have a gigantic node_modules directory... 00:05:11.576 --> 00:05:14.206 align:middle because JavaScript has tons of dependencies. 00:05:14.956 --> 00:05:20.376 align:middle Oh, the recipe also updated our .gitignore file to ignore node_modules/. 00:05:20.376 --> 00:05:25.746 align:middle Just like with Composer, there is no reason to commit this stuff. 00:05:25.746 --> 00:05:32.876 align:middle This also ignores public/build, which is where Webpack will put our final, built files. 00:05:32.876 --> 00:05:34.846 align:middle In fact, I'll show you why. 00:05:35.406 --> 00:05:43.196 align:middle At the root of your app, the recipe added the most important file of all webpack.config.js. 00:05:44.006 --> 00:05:47.636 align:middle This is the configuration file that Encore reads. 00:05:48.356 --> 00:05:54.896 align:middle Actually, if you use Webpack by itself, you would have this exact same file! 00:05:55.446 --> 00:06:01.016 align:middle Encore is basically a configuration generator: you tell it how you want Webpack to behave 00:06:01.496 --> 00:06:04.496 align:middle and then, all the way at the bottom, say: 00:06:04.816 --> 00:06:09.496 align:middle please give me the standard Webpack config that will give me that behavior. 00:06:10.436 --> 00:06:15.516 align:middle Encore makes things easy, but it's still true Webpack under-the-hood. 00:06:15.516 --> 00:06:19.906 align:middle Most of the stuff in this file is for configuring some optional features 00:06:19.906 --> 00:06:23.726 align:middle that we'll talk about along the way - so ignore it all for now. 00:06:24.186 --> 00:06:29.526 align:middle The three super important things that we need to talk about are output path, 00:06:29.526 --> 00:06:32.466 align:middle public path and this addEntry() thing. 00:06:33.446 --> 00:06:38.946 align:middle Let's do that next, build our first Webpack'ed files and include them on the page.