Yo friends!
It's Webpack time!
Yeeeeees! Well, maybe not super "yeeeeees!"
if you are the person responsible for installing and configuring Webpack...
Cause, woh, yea, that can be tough!
Unless... you're using Webpack Encore!
More about that in a few minutes.
But first, I want you to know why you should care about Webpack...
like super please-let-me-start-using-webpack-right-now-and
-never-stop-using-it kind of care.
Sure, technically, Webpack is just a tool to build & compile your JavaScript and CSS files.
But, it will revolutionize the way you write JavaScript.
The reason is right on their homepage!
In PHP, we organize our code into small files that work together.
But then, traditionally, in JavaScript, we just smash all our code into one gigantic file.
Or, if we do split them up, it's still a pain because we then need to remember
to go add a new script tag to every page that needs it...
and those script tags need to be in just the right order.
If they're not, kaboom!
And even if you do have a build system like Gulp, you still need to manage keeping all
of the files listed there and in the right order.
How can our code be so nicely organized in PHP, but such a disaster in JavaScript?
Webpack changes this.
Suppose we have an index.js file but we want
to organize a function into a different, bar.js file.
Thanks to Webpack, you can "export" that function as a value from bar.js
and then import and use it in index.js.
Yes, we can organize our code into small pieces!
Webpack's job is to read index.js, parse through all of the import statements it finds,
and output one JavaScript file that has everything inside of it.
Webpack is a huge over-achiever.
So let's get to it!
To import or...
Webpack the maximum amount of knowledge from this tutorial, download the course code
from this page and code along with me.
After you unzip the file, you'll find a start/ directory
that has the same code I have here: a Symfony 4 app.
Open up the README.md file for all the setup details.
The last step will be to open a terminal, move into the project and start a web server.
I'm going to use the Symfony local web server,
which you can get from https://symfony.com/download.
Run it with: symfony serve Then, swing back over to your browser and open
up http://localhost:8000 to see...
The Space Bar!
An app we've been working on throughout our Symfony series.
And, we did write some JavaScript and CSS in that series...
but we kept it super traditional: the JavaScript is pretty boring, and there are multiple files
but each has its own script tag in my templates.
This is not the way I really code.
So, let's do this correctly.
So even though both Webpack and Encore are node libraries, if you're using Symfony,
you'll install Encore via composer...
well... sort of.
Open a new terminal tab and run:
composer require encore This downloads a small bundle called WebpackEncoreBundle.
Actually, Encore itself can be used with any framework or any language!
But, it works super well with Symfony, and this thin bundle is part of the reason.
This bundle also has a Flex recipe - oooooOOOOooo -
which gives us some files to get started!
If you want to use Webpack from outside of a Symfony app,
you would just need these files in your app.
Back in the editor, check out package.json.
This is the composer.json file of the Node world.
It requires Encore itself plus two optional packages that we'll use.
To actually download these, go back to your terminal and run: yarn Or...
yarn install if you're less lazy than me - it's the same thing.
Node has two package managers - yarn and npm - I know, kinda weird -
but you can install and use whichever you want.
Anyways, this is downloading our 3 libraries and their dependencies into Node's version
of the vendor/ directory: node_modules/.
And... done!
Congrats! You now have a gigantic node_modules directory...
because JavaScript has tons of dependencies.
Oh, the recipe also updated our .gitignore file to ignore node_modules/.
Just like with Composer, there is no reason to commit this stuff.
This also ignores public/build, which is where Webpack will put our final, built files.
In fact, I'll show you why.
At the root of your app, the recipe added the most important file of all webpack.config.js.
This is the configuration file that Encore reads.
Actually, if you use Webpack by itself, you would have this exact same file!
Encore is basically a configuration generator: you tell it how you want Webpack to behave
and then, all the way at the bottom, say:
please give me the standard Webpack config that will give me that behavior.
Encore makes things easy, but it's still true Webpack under-the-hood.
Most of the stuff in this file is for configuring some optional features
that we'll talk about along the way - so ignore it all for now.
The three super important things that we need to talk about are output path,
public path and this addEntry() thing.
Let's do that next, build our first Webpack'ed files and include them on the page.