WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:01.266 --> 00:00:04.196 align:middle To start, Webpack only needs to know three things. 00:00:04.196 --> 00:00:10.956 align:middle The first - setOutputPath() - tells it where to put the final, built files and the second - 00:00:11.076 --> 00:00:14.536 align:middle setPublicPath() - tells it the public path to this directory. 00:00:15.556 --> 00:00:21.936 align:middle The third important piece, and where everything truly starts, is addEntry(). 00:00:22.286 --> 00:00:31.296 align:middle Here's the idea: we point Webpack at just one JavaScript file - assets/js/app.js. 00:00:32.356 --> 00:00:38.016 align:middle Then, it parses through all the import statements it finds, puts all the code together, 00:00:38.246 --> 00:00:43.486 align:middle and outputs one file in public/build called app.js. 00:00:43.486 --> 00:00:49.896 align:middle The first argument - app - is the entry's name, which can be anything, 00:00:49.896 --> 00:00:56.466 align:middle but it controls the final filename: app becomes public/build/app.js. 00:00:56.576 --> 00:01:01.436 align:middle And the recipe gave us a few files to start. 00:01:01.976 --> 00:01:04.956 align:middle Open up assets/js/app.js. 00:01:06.216 --> 00:01:09.086 align:middle This is the file that Webpack will start reading. 00:01:09.686 --> 00:01:12.516 align:middle There's not much here yet - a console.log() and... 00:01:12.886 --> 00:01:19.086 align:middle woh! There is one cool thing: a require call to a CSS file! 00:01:20.276 --> 00:01:23.106 align:middle We'll talk more about this later, but in the same way 00:01:23.106 --> 00:01:28.296 align:middle that you can import other JavaScript files, you can import CSS too! 00:01:28.806 --> 00:01:33.986 align:middle And, by the way, this require function and the import statement we saw earlier 00:01:33.986 --> 00:01:37.236 align:middle on Webpack's docs, do basically the same thing. 00:01:37.896 --> 00:01:38.686 align:middle More on that soon. 00:01:39.666 --> 00:01:45.916 align:middle To make the CSS a bit more obvious, open app.css and change the background to lightblue 00:01:46.516 --> 00:01:50.756 align:middle and add an !important so it will override my normal background. 00:01:52.606 --> 00:01:56.406 align:middle Before we execute Encore, back in webpack.config.js, 00:01:56.776 --> 00:01:59.006 align:middle we need to make one other small tweak. 00:01:59.006 --> 00:02:04.156 align:middle Find the enableSingleRuntimeChunk() line, comment it out, 00:02:04.546 --> 00:02:08.166 align:middle and put disableSingleRuntimeChunk() instead. 00:02:09.286 --> 00:02:13.086 align:middle Don't worry about this yet - we'll see exactly what it does later. 00:02:14.256 --> 00:02:19.966 align:middle Ok! We've told Webpack where to put the built files and which one file to start parsing. 00:02:20.446 --> 00:02:21.406 align:middle Let's do this! 00:02:21.466 --> 00:02:25.836 align:middle Find your terminal and run the Encore executable with: . 00:02:26.166 --> 00:02:33.316 align:middle /node_modules/.bin/encore dev Because we want a development build. 00:02:34.106 --> 00:02:35.496 align:middle And... hey! 00:02:35.826 --> 00:02:38.196 align:middle A nice little notification that it worked! 00:02:39.116 --> 00:02:45.596 align:middle And... interesting - it built two files: app.js and app.css. 00:02:45.596 --> 00:02:50.176 align:middle You can see them inside the public/build directory. 00:02:50.706 --> 00:02:51.926 align:middle The app.js file... 00:02:52.126 --> 00:02:57.266 align:middle well... basically just contains the code from the assets/js/app.js file because... 00:02:57.266 --> 00:03:01.936 align:middle that file didn't import any other JavaScript files. 00:03:02.386 --> 00:03:03.846 align:middle We'll change that soon. 00:03:04.096 --> 00:03:08.286 align:middle But our app entry file did require a CSS file. 00:03:08.676 --> 00:03:11.286 align:middle And yea, Webpack understands this! 00:03:11.946 --> 00:03:13.696 align:middle Here's the full flow. 00:03:13.696 --> 00:03:18.656 align:middle First, Webpack looks at assets/js/app.js. 00:03:18.656 --> 00:03:23.536 align:middle It then looks for all the import and require statements. 00:03:24.136 --> 00:03:27.926 align:middle Each time we import a JavaScript file, it puts those contents 00:03:27.926 --> 00:03:30.756 align:middle into the final, built app.js file. 00:03:31.026 --> 00:03:34.936 align:middle And each time we import a CSS file, it puts those contents 00:03:35.046 --> 00:03:38.136 align:middle into the final, built app.css file. 00:03:39.146 --> 00:03:42.226 align:middle Oh, and the final filename - app.css? 00:03:42.656 --> 00:03:46.936 align:middle It's app.css because our entry is called app. 00:03:47.046 --> 00:03:53.756 align:middle If we changed this to appfoo.css, renamed the file, then ran Encore again, 00:03:54.166 --> 00:04:01.946 align:middle it would still build app.js and app.css files thanks to the first argument to addEntry(). 00:04:03.156 --> 00:04:04.006 align:middle What this means is... 00:04:04.126 --> 00:04:08.866 align:middle we know have one JavaScript file that contains all the code we need 00:04:09.276 --> 00:04:12.416 align:middle and one CSS file that contains all the CSS! 00:04:13.146 --> 00:04:15.816 align:middle All we need to do is add them to our page! 00:04:16.726 --> 00:04:19.386 align:middle Open up templates/base.html.twig. 00:04:20.346 --> 00:04:23.806 align:middle Let's keep the existing stylesheets for now and add a new one: 00:04:24.446 --> 00:04:33.806 align:middle <link rel="stylesheet" href=""> the asset() function and the public path: build/app.css. 00:04:33.806 --> 00:04:44.326 align:middle At the bottom, add the script tag with src="{{ asset('build/app.js') }}". 00:04:47.106 --> 00:04:48.996 align:middle Oh, make that app.js. 00:04:48.996 --> 00:04:52.336 align:middle If you're not familiar with the asset() function, 00:04:52.616 --> 00:04:54.786 align:middle it's not doing anything important for us. 00:04:55.466 --> 00:04:58.146 align:middle Because the public/ directory is our document root, 00:04:58.536 --> 00:05:01.906 align:middle we're literally pointing to the public path. 00:05:02.006 --> 00:05:02.636 align:middle Let's try it! 00:05:03.066 --> 00:05:05.366 align:middle Move over, refresh and... 00:05:06.106 --> 00:05:08.286 align:middle hello, weird blue background. 00:05:09.096 --> 00:05:10.146 align:middle And in the console... 00:05:10.546 --> 00:05:12.396 align:middle yes! There's the log! 00:05:13.646 --> 00:05:17.496 align:middle We've only started to scratch the surface of the possibilities of Webpack. 00:05:17.986 --> 00:05:22.926 align:middle So if you're still wondering: "why is going through this build process so useful?". 00:05:23.216 --> 00:05:24.096 align:middle Stay tuned. 00:05:24.646 --> 00:05:27.346 align:middle Because next, we're going to talk about the require 00:05:27.346 --> 00:05:30.756 align:middle and import statements and start organizing our code.