WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:01.116 --> 00:00:06.886 align:middle Bonus! A really cool side-effect of using Webpack is that none of these files 00:00:06.886 --> 00:00:10.086 align:middle in the assets/ directory need to be public anymore! 00:00:10.766 --> 00:00:14.026 align:middle I mean they live in the public directory currently... 00:00:14.396 --> 00:00:18.176 align:middle but the user never needs to access them directly: 00:00:18.776 --> 00:00:22.306 align:middle Webpack processes and moves them into build/. 00:00:24.046 --> 00:00:28.246 align:middle To celebrate, let's move assets/ out of the public/ directory 00:00:28.366 --> 00:00:30.366 align:middle and into the root of our project. 00:00:31.096 --> 00:00:32.596 align:middle We don't need to do this... 00:00:32.666 --> 00:00:37.596 align:middle but if something doesn't need to be publicly accessible, why make it public? 00:00:38.386 --> 00:00:40.716 align:middle This change breaks almost nothing. 00:00:40.716 --> 00:00:46.916 align:middle The only things we need to update are the paths in webpack.config.js: 00:00:49.466 --> 00:00:52.466 align:middle After making that change, restart Encore! 00:00:56.746 --> 00:00:58.016 align:middle And... refresh! 00:01:01.546 --> 00:01:02.456 align:middle Woohoo! Wait... 00:01:03.246 --> 00:01:05.646 align:middle there's a missing image! 00:01:06.176 --> 00:01:08.656 align:middle Bah! I was lying! 00:01:09.206 --> 00:01:13.896 align:middle There is one file that still needs to be publicly accessible! 00:01:15.276 --> 00:01:17.216 align:middle Open index.html.twig... 00:01:20.946 --> 00:01:27.486 align:middle ah! We have a good, old-fashioned img tag that references one 00:01:27.486 --> 00:01:30.946 align:middle of the images in the assets/ directory: And... 00:01:30.946 --> 00:01:33.506 align:middle whoops! It's not public anymore. 00:01:33.946 --> 00:01:39.296 align:middle My bad! This is one of the few cases - maybe the only case - 00:01:39.646 --> 00:01:46.226 align:middle where we need to reference public images from outside a file that Webpack processes. 00:01:46.226 --> 00:01:52.026 align:middle The simple problem is that Webpack doesn't know that it needs to move this file! 00:01:52.656 --> 00:01:57.886 align:middle Of course, there's an easy fix: we could just move this one file back 00:01:57.886 --> 00:01:59.066 align:middle into the public/ directory. 00:01:59.676 --> 00:02:05.546 align:middle But... that sucks: I'd rather keep all of my assets in one place. 00:02:06.776 --> 00:02:12.316 align:middle To do this, we can take advantage of a Webpack plugin that can copy the file for us. 00:02:13.046 --> 00:02:17.096 align:middle Google for copy-webpack-plugin to find its GitHub page. 00:02:18.086 --> 00:02:21.136 align:middle Encore gives you a lot of features... 00:02:21.276 --> 00:02:23.926 align:middle but it doesn't give you everything. 00:02:24.586 --> 00:02:25.966 align:middle But... no worries! 00:02:26.356 --> 00:02:28.466 align:middle We're using Webpack under-the-hood. 00:02:29.576 --> 00:02:33.906 align:middle So if you find a Webpack plugin you want, you can totally use it! 00:02:34.746 --> 00:02:38.556 align:middle Side note, Encore will have a copy() method soon. 00:02:39.086 --> 00:02:41.806 align:middle Then you'll be able to do this without a plugin. 00:02:42.446 --> 00:02:49.556 align:middle Yay! But, this is still a great example of how to extend Webpack beyond Encore. 00:02:50.556 --> 00:02:52.406 align:middle Anyways, install the plugin first. 00:02:52.916 --> 00:02:55.126 align:middle Notice that they use npm. 00:02:55.776 --> 00:02:57.066 align:middle I'm going to use yarn. 00:02:57.586 --> 00:03:01.116 align:middle So copy the name of that plugin, find your terminal, and run: 00:03:01.526 --> 00:03:10.286 align:middle yarn add copy-webpack-plugin -- dev To use the plugin, we need to require it 00:03:10.286 --> 00:03:12.346 align:middle at the top of the Webpack config file. 00:03:14.976 --> 00:03:21.526 align:middle No problem: And then below, um.... 00:03:21.696 --> 00:03:23.526 align:middle config =... 00:03:23.526 --> 00:03:24.916 align:middle and plugins:... 00:03:25.016 --> 00:03:27.636 align:middle what the heck does this mean? 00:03:28.846 --> 00:03:31.176 align:middle Well... earlier, I told you 00:03:31.176 --> 00:03:37.026 align:middle that webpack.config.js normally returns a big configuration object. 00:03:37.726 --> 00:03:41.316 align:middle And Encore is just a tool to help generate that config. 00:03:41.316 --> 00:03:48.106 align:middle In fact, at the bottom, we can see what that config looks like if we want! 00:03:49.046 --> 00:03:52.436 align:middle Just console.log(module.exports). 00:03:53.146 --> 00:03:59.906 align:middle Then, restart Encore: yarn run encore dev -- watch Woh! 00:04:00.296 --> 00:04:02.376 align:middle There's our config! 00:04:03.306 --> 00:04:07.986 align:middle Actually, it's not so scary: there are keys for entry, output, 00:04:08.216 --> 00:04:11.156 align:middle module, plugins and a few other things. 00:04:11.156 --> 00:04:14.566 align:middle For example, see the plugins key? 00:04:15.446 --> 00:04:19.336 align:middle Back on their docs, that is what they're referring to: 00:04:19.926 --> 00:04:24.066 align:middle they want you to add their plugin to that config key. 00:04:26.206 --> 00:04:28.206 align:middle Ok, so how can we do that? 00:04:29.576 --> 00:04:32.456 align:middle Well, you could always just add it manually: 00:04:33.426 --> 00:04:38.106 align:middle module.exports.plugins.push() and then the plugin. 00:04:40.176 --> 00:04:43.796 align:middle Yep: you could literally add something to the plugins array! 00:04:44.446 --> 00:04:49.726 align:middle But, fortunately, Encore gives you an easier way to modify the most common things. 00:04:50.746 --> 00:04:55.946 align:middle In this case, use addPlugin() and then new CopyWebpackPlugin(). 00:04:57.146 --> 00:05:05.016 align:middle Pass this an array - this will soon be the paths it should copy: But, before we fill that in... 00:05:05.456 --> 00:05:06.936 align:middle let's think about this. 00:05:07.656 --> 00:05:11.466 align:middle I don't need to copy all of my images to the build/ directory... 00:05:11.736 --> 00:05:13.536 align:middle just one of them right now. 00:05:14.486 --> 00:05:20.176 align:middle So let's create a new directory called static/ and move any files that need to be copied 00:05:20.266 --> 00:05:23.786 align:middle into that directory, like dumbell.png. 00:05:23.786 --> 00:05:29.716 align:middle In the CopyWebpackPlugin config, set from to . 00:05:30.026 --> 00:05:40.466 align:middle /assets/static and to to just static: This will copy to the output directory /static. 00:05:42.176 --> 00:05:44.156 align:middle Ok, go restart Encore! 00:05:45.446 --> 00:05:51.596 align:middle yarn run encore dev -- watch Once the build finishes... 00:05:52.006 --> 00:05:53.566 align:middle inside public/build... 00:05:54.396 --> 00:05:57.916 align:middle yes! We have a new static directory. 00:05:58.696 --> 00:06:02.376 align:middle It's nothing fancy, but this is a nice way to move files 00:06:02.376 --> 00:06:08.306 align:middle so that we can reference them publicly in a template: There's one more reference 00:06:08.356 --> 00:06:13.076 align:middle in the login template: search for "bell" and... 00:06:13.526 --> 00:06:17.106 align:middle update this one too: Try it! 00:06:17.106 --> 00:06:19.636 align:middle Find your browser and refresh. 00:06:22.106 --> 00:06:22.826 align:middle There it is! 00:06:23.686 --> 00:06:27.306 align:middle Next, let's make our CSS sassier... 00:06:27.426 --> 00:06:28.976 align:middle with... Sass of course!