Our source files all live in
web/assets. We code there, and Webpack moves everything
we need to
web/build. At runtime, when the user actually loads the site, nothing
is read from
web/assets. Nope! The user downloads all files from
And that means... well...
web/assets does not need to be publicly accessible
anymore! We can - and should - hide our source files.
Yes, I mean we can, literally:
mv web/assets assets
assets/ directory now lives at the root of our project.
And really... that doesn't break much. All of our files use relative paths internally
to refer to each other. The only thing we need to update is
to remove the
web/ from the 3 entries. Yep, that's it.
webpack terminal tab and restart!
Everything still builds... and the page still loads fine.
Except... we lost something small. Before this change, the leaderboard had a little
dumbbell image. Inspect that element. Yea, inside the
h2, there is a good, old-fashioned
img tag. And it references
/assets/images/dumbbell.png. I was wrong! I said nothing
was referencing the public
web/assets directory. But that's not true!
app/Resources/views/lift/index.html.twig, yep, there is the
How can we fix this? It would be silly to keep all of our source files in a public directory just so we can reference a few, static images.
The answer? With a plugin called
copy-webpack-plugin. Google for it.
This plugin is a little tool that allows you to copy files from one location to
another when Webpack runs. For us, it means we could copy files to the
directory that aren't processed through Webpack.
Let's get it installed! Copy the name of the package. Then, in your favorite open terminal tab, run:
yarn add copy-webpack-plugin --dev
Back in the documentation, copy the
require line. In our
that, but use the trendier
I'll also copy the
new CopyWebpackPlugin() line. This goes under the
So here's the deal: in the
images/ directory, we have a mixture of images. One -
dumbbell-mini.png - is processed through Webpack and copied to the
already. But the other,
dumbbell.png is not.
To organize this, create a new directory in
static/. Move the
dumbbell file there. This directory will hold all assets that are not processed
CopyWebpackPlugin, we will copy from
add a comment about what this means: copies to
Give it a try! Hit Ctrl+C to stop webpack, then restart it! And instantly, we
web/build/static directory with
This is nothing crazy, but it works well! In our template -
build/static/dumbbell.png. Also open
img tag there too.
When we refresh, no nasty surprises this time! The image loads.
Next! Let's add some fanciness to our CSS... by using Sass...