WEBVTT

NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com

00:00:00.056 --> 00:00:00.306 align:middle
Hiya guys!

00:00:00.306 --> 00:00:07.446 align:middle
And welcome to our tutorial on Webpack Encore!

00:00:08.156 --> 00:00:12.496 align:middle
I have to admit, this tutorial
is near and dear to my heart,

00:00:12.906 --> 00:00:15.426 align:middle
because I helped write Webpack Encore.

00:00:15.876 --> 00:00:22.776 align:middle
But also because I think you're going to love
working with it and I know that it's going

00:00:22.776 --> 00:00:26.736 align:middle
to drastically improve the
way you write JavaScript.

00:00:27.576 --> 00:00:31.666 align:middle
Basically, Encore is a wrapper around Webpack...

00:00:31.916 --> 00:00:37.766 align:middle
because honestly, Webpack - while
amazing - is a pain to setup.

00:00:38.816 --> 00:00:40.946 align:middle
And what does Webpack do?

00:00:41.556 --> 00:00:42.426 align:middle
We'll get to that.

00:00:43.236 --> 00:00:44.146 align:middle
And when we do....

00:00:44.476 --> 00:00:47.686 align:middle
you're definitely going to
want to code along with me.

00:00:48.016 --> 00:00:50.926 align:middle
Because, we're going to code JavaScript...

00:00:51.526 --> 00:00:52.496 align:middle
dramatic pause...

00:00:53.066 --> 00:00:54.116 align:middle
correctly!

00:00:54.976 --> 00:00:56.916 align:middle
Download the course code from this page.

00:00:59.766 --> 00:01:05.236 align:middle
After you unzip it, you'll find a start/
directory that has the same code you see here.

00:01:05.236 --> 00:01:13.626 align:middle
Follow the README.md file to get setup
details and, of course, a Haiku about Webpack.

00:01:14.706 --> 00:01:18.366 align:middle
The last step will be to find a
terminal, move into the project,

00:01:18.586 --> 00:01:24.086 align:middle
and run php bin/console server:run
to start the built-in web server.

00:01:24.086 --> 00:01:30.796 align:middle
Find your most favorite browser
and go to: http://localhost:8000.

00:01:31.716 --> 00:01:34.866 align:middle
Aw yea, it's Lift Stuff!

00:01:34.866 --> 00:01:38.316 align:middle
Our startup for keeping track
of all of the stuff...

00:01:38.516 --> 00:01:45.206 align:middle
we lift! Login with username
ron_furgandy password pumpup.

00:01:46.506 --> 00:01:54.176 align:middle
This is a two-page app: the login page and this
incredible page: where we can record that -

00:01:54.516 --> 00:01:58.456 align:middle
while programming today -
we lifted our cat 10 times.

00:01:59.276 --> 00:02:01.306 align:middle
I love exercise!

00:02:02.266 --> 00:02:05.506 align:middle
Everything on this page works
via AJAX and JavaScript...

00:02:06.806 --> 00:02:09.566 align:middle
but the JavaScript is pretty traditional.

00:02:09.566 --> 00:02:12.546 align:middle
If you watched our Webpack tutorial,

00:02:12.976 --> 00:02:18.636 align:middle
we've actually reset this project
back to before we introduced Webpack.

00:02:19.436 --> 00:02:24.426 align:middle
Yep, in the public/ directory, there are
some normal CSS and JavaScript files.

00:02:24.786 --> 00:02:25.926 align:middle
Nothing special.

00:02:26.816 --> 00:02:30.316 align:middle
Oh, and this is a Symfony 4 application...

00:02:30.506 --> 00:02:32.366 align:middle
but that won't matter much.

00:02:32.396 --> 00:02:37.986 align:middle
For you Symfony users out there,
the only special setup I've done is

00:02:37.986 --> 00:02:43.256 align:middle
to install the Asset component so that
we can use the Twig asset() function.

00:02:43.986 --> 00:02:49.256 align:middle
On a fresh Symfony 4 project, run:
composer require asset to get it.

00:02:50.346 --> 00:02:55.196 align:middle
Ok... so what's all the fuss
about with Webpack anyways?

00:02:55.716 --> 00:03:01.556 align:middle
Well, the JavaScript file that runs
the main page is called RepLogApp.js.

00:03:02.836 --> 00:03:06.346 align:middle
Look inside: it holds two classes.

00:03:06.346 --> 00:03:10.226 align:middle
If you haven't see the class
syntax in JavaScript,

00:03:10.646 --> 00:03:14.356 align:middle
go back and watch episode
2 of our JavaScript series.

00:03:14.746 --> 00:03:16.776 align:middle
It's cool stuff.

00:03:16.776 --> 00:03:20.526 align:middle
Anyways, we have a class RepLogApp and then....

00:03:20.716 --> 00:03:23.956 align:middle
way down below, we have Helper.

00:03:24.746 --> 00:03:32.496 align:middle
In PHP, we would never do this: we would
organize each class into a different file.

00:03:33.216 --> 00:03:35.776 align:middle
But in JavaScript, that's a pain!

00:03:36.356 --> 00:03:42.056 align:middle
Because, if I move this Helper code
to another file, then in my template,

00:03:42.056 --> 00:03:45.516 align:middle
I need to remember to include
a second script tag.

00:03:46.246 --> 00:03:48.536 align:middle
This is why we can't have nice things.

00:03:49.296 --> 00:03:53.936 align:middle
But... what if we could require
files in JavaScript...

00:03:54.346 --> 00:03:57.246 align:middle
just like we can in PHP?

00:03:57.246 --> 00:03:58.686 align:middle
Um... let's try it!

00:03:59.346 --> 00:04:08.106 align:middle
Copy the Helper class, remove it, then - in the
js/ directory, add a new file: RepLogHelper.js.

00:04:08.106 --> 00:04:14.336 align:middle
Paste the class here - I'll
remove the comment on top.

00:04:15.606 --> 00:04:23.446 align:middle
You see, in Node - which is server-side
JavaScript, they have this idea of modules.

00:04:23.946 --> 00:04:25.926 align:middle
Each file is a "module"...

00:04:26.246 --> 00:04:34.206 align:middle
which doesn't mean much except that each
file can export a value from itself.

00:04:34.316 --> 00:04:41.506 align:middle
Then, other files, um, modules, can
require that file to get that value.

00:04:42.386 --> 00:04:48.826 align:middle
In RepLogHelper.js, we really to make this
Helper class available to other files.

00:04:49.626 --> 00:04:55.656 align:middle
To export it, at the bottom,
add module.exports = Helper.

00:04:56.726 --> 00:05:04.586 align:middle
Now, in RepLogApp, at the top,
add const Helper = require('.

00:05:05.146 --> 00:05:06.996 align:middle
/RepLogHelper');.

00:05:06.996 --> 00:05:11.386 align:middle
I want to highlight two things.

00:05:11.826 --> 00:05:16.426 align:middle
First, you do not need the .js
at the end of the filename.

00:05:17.076 --> 00:05:18.296 align:middle
You can add it...

00:05:18.466 --> 00:05:20.826 align:middle
but you don't need it - it's assumed.

00:05:20.826 --> 00:05:23.456 align:middle
Second, the .

00:05:24.176 --> 00:05:30.306 align:middle
/ is important: this tells the require
function to look relative to this file.

00:05:31.276 --> 00:05:35.496 align:middle
Later, we'll find out what
it means to not start with .

00:05:35.666 --> 00:05:43.376 align:middle
/. So here's the reality: if we ran
this code on the server via Node...

00:05:43.916 --> 00:05:45.456 align:middle
it would work!

00:05:46.106 --> 00:05:49.106 align:middle
Yea! This require thing is real!

00:05:49.796 --> 00:05:52.026 align:middle
But... does it work in a browser?

00:05:52.836 --> 00:05:53.566 align:middle
Let's find out!

00:05:54.176 --> 00:05:57.516 align:middle
Move over, open the debugging console and...

00:05:57.886 --> 00:06:00.346 align:middle
refresh! Oh man!

00:06:00.746 --> 00:06:04.666 align:middle
require is not defined Booo!

00:06:04.666 --> 00:06:10.436 align:middle
So... the require function is not
something that works in a browser...

00:06:10.866 --> 00:06:12.796 align:middle
in any browser.

00:06:13.386 --> 00:06:16.426 align:middle
And, the thing is, it can't work.

00:06:16.426 --> 00:06:20.236 align:middle
PHP and Node are server-side languages,

00:06:20.686 --> 00:06:24.256 align:middle
so Node can instantly read
this file from the filesystem.

00:06:24.666 --> 00:06:29.526 align:middle
But in a browser, in order to
get this RepLogHelper.js file,

00:06:29.916 --> 00:06:32.786 align:middle
it would need to make an AJAX request...

00:06:33.336 --> 00:06:36.236 align:middle
and of course that's far from instant.

00:06:36.786 --> 00:06:41.356 align:middle
The point is: the require function
just doesn't make sense in a browser.

00:06:41.976 --> 00:06:45.336 align:middle
And this is the problem that Webpack solves.

00:06:46.086 --> 00:06:51.666 align:middle
Webpack is a command that can read this
file, parse through all of the require calls

00:06:51.906 --> 00:06:56.966 align:middle
and create one final JavaScript file
packed with all the code we need.

00:06:57.576 --> 00:06:59.706 align:middle
But, we're not going to install
Webpack directly.

00:07:00.376 --> 00:07:05.166 align:middle
Google for "Webpack Encore" to find
its documentation on symfony.com.

00:07:07.876 --> 00:07:11.746 align:middle
Click into the Installation
page and copy the yarn add line.

00:07:12.826 --> 00:07:17.526 align:middle
And, some background: Webpack
is a Node executable,

00:07:17.946 --> 00:07:19.796 align:middle
so you'll need to make sure it's installed.

00:07:20.376 --> 00:07:21.096 align:middle
And second...

00:07:21.496 --> 00:07:26.286 align:middle
Node has two package managers: yarn and npm.

00:07:26.916 --> 00:07:29.566 align:middle
You can use either - I'll use Yarn.

00:07:30.506 --> 00:07:32.286 align:middle
So make sure you have that installed too.

00:07:33.226 --> 00:07:39.296 align:middle
Then, find your terminal, open a fresh
new tab, lift your cat, and then run:

00:07:39.726 --> 00:07:47.546 align:middle
yarn add @symfony/webpack-encore
-- dev If you're a Symfony user,

00:07:47.726 --> 00:07:50.166 align:middle
there is also a composer line you can use.

00:07:51.166 --> 00:07:57.146 align:middle
Actually, all it really does is install
a Flex recipe that creates a few files

00:07:57.146 --> 00:07:58.756 align:middle
for you to get you started faster.

00:07:59.446 --> 00:08:03.416 align:middle
We'll do everything manually so
that we can see how it works.

00:08:04.226 --> 00:08:05.646 align:middle
Move back and...

00:08:05.826 --> 00:08:06.806 align:middle
it's done!

00:08:06.846 --> 00:08:11.026 align:middle
If you're new to Yarn, this did two things.

00:08:11.026 --> 00:08:17.706 align:middle
First, it created a package.json file -
that's just like composer.json for Node -

00:08:18.376 --> 00:08:23.196 align:middle
and also a yarn.lock file -
that's like composer.lock.

00:08:24.406 --> 00:08:28.766 align:middle
Second, it downloaded everything
into a node_modules/ directory:

00:08:29.146 --> 00:08:31.426 align:middle
that's the vendor/ directory for Node.

00:08:32.136 --> 00:08:37.826 align:middle
And just like in PHP, we do not want
to commit all those vendor files.

00:08:39.226 --> 00:08:44.086 align:middle
Open your .gitignore file
and ignore /node_modules/*.

00:08:45.286 --> 00:08:45.996 align:middle
Brilliant!

00:08:46.436 --> 00:08:48.336 align:middle
Encore is installed.

00:08:48.856 --> 00:08:50.186 align:middle
Let's do some webpacking!