Webpack Encore

How Webpack Encore relates to Webpack and how to configure it

Published in

The Startup

5 min readJul 13, 2020

The codebase I’m currently working with is built on PHP’s Symfony framework. After version 4, Symfony ships with Webpack Encore. I use the tool daily but have never had to install and configure it from the ground up.

I thought that writing a post about it might be a good way to walk through it on my own and also gain a deeper understanding of it.

A quick note on Webpack

Why do we need Webpack?

In PHP, code is organized into small files that work together.

In JavaScript, it is possible to write all our code into one file — for a small project. However, more often than not, we are likely writing code for real-world applications. In real-world scenarios, such a single file approach would quickly lead to disarray and difficulty with scalability.

Nonetheless, even if we did decide to split our code into different JavaScript files, we would still need to add a corresponding script tag to every HTML file dependent on them.

On top of that, these script tags would need to be written out in a specific order representing how they depend on one another. So if we wrote a file that depends on three other files, those three files need to be included first and in the right order.

Modern websites and web applications are growing smarter, bigger, and more complex. Forgoing the pain of having to worry about such manual tasks during development is one of the things that Webpack allows developers to do.

Webpack is a module bundler. Its primary purpose is to combine or “bundle” JavaScript files for usage in a browser, and just about any other front-end assets like HTML, CSS, and images.

It takes a bunch of different assets: files of various types (JavaScript, SVG, PNG, JPEG, CSS, SASS, etc…) and bundles them down into a smaller group of files. Typically one for your JavaScript, another for your CSS, one for your images, or perhaps even one for your third party Javascript (vendor.js).

In addition to bundling files together, it also manages dependencies; it makes sure that a particular code that needs to load first will indeed load first.

So, two main things that Webpack does:

bundles our code/assets together
manages our dependencies.

What’s the relationship between Symfony’s Webpack Encore and Webpack?

The configuration for Webpack is known to be a little daunting. It’s very configurable, which is why it can prove to be a bit tedious to set up from the ground up.

As previously mentioned, after version 4, Symfony comes with Webpack Encore: a more straightforward way to integrate Webpack into an application. That’s because Encore wraps Webpack, with an easy to use and fluent API; allowing us to tell Webpack how we’d like it to behave.

This is done via the module.exports = Encore.getWebpackconfig(); statement, that can be found at the bottom of our webpack.config.js file (we’ll dive deeper into this file in the configuration). It’s as if you’re telling Encore: “Please give me the standard config that will get me that behavior.”

There are other similar Webpack wrapper tools available for other languages and frameworks like Ruby on rail’s Webpacker or Laravel’s mix.

Encore can be used with any PHP application or other server-side programming languages, but it works best with PHP’s Symfony framework.

Configuration

1) Installation:

Hop into your terminal and run composer require webpack this will download a small bundle called webpackEncoreBundle.
Then run yarn install or (npm install) to create our most important file: webpack.config.js which will end up at the root of your project directory.

Upon installation it will come with a basic config that looks like the following gist:

After installation, your app already has one CSS and one JS file, organized under an assets/ directory:

assets/js/app.js
assets/css/app.css

Your app.js file is like a standalone JavaScript application: it will require all of the dependencies it needs (e.g. jQuery or React), including any CSS files. The following is an example of it requiring your CSS via an import statement:

// assets/js/app.js
// ...import '../css/app.css';// var $ = require('jquery');

2) Configuring the file:

Let’s have a look at what’s in the file. Webpack Encore only needs to know 3 configs:

setOutputPath('public/build/') (line 11) tells Webpack where to put the final build files
setPublicPath('/build') (line 13) tells it the public path to that directory
addEntry('app', './assets/js/app.js')(line 26) this tells Encore to load the assets/js/app.js file and follow all of the require() statements. It then packages everything together and thanks to the first 'app' argument - outputs a final fileapp.js(containingapp.css) which will go into the public/build directory.

Building the assets

We told Webpack where to put the build files setOutputPath('public/build/') and which one file -addEntry('app', './assets/js/app.js') to start parsing.

To build your assets you can run the following commands:

yarn encore dev : to compile the asset once.
yarn encore dev — watch : add the flag watch to enable assets to recompile automatically when a file changes.
yarn encore production : run this to create a production build when your app is ready to be deployed.

from your first build you will notice 3 new files created into your public/build/ directory:

public/build/app.js : holds all the JavaScript for your “app” entry
public/build/app.css :holds all the CSS for your “app” entry
public/build/runtime.js : this file is part of the runtime chunk feature: .enableSingleRuntimeChunk() if enabled in your configuration, the file will be created. It contains webpack’s runtime code.

3) Adding the twig helpers

When Encore and Symfony are combined we don’t need to render script and link tags manually. We can use the following helper functions and pass in our ‘app’ entry:

{{ encore_entry_link_tags(app) }} ( line 9 ) for the stylesheets in our stylesheets blocks
{{ encore_entry_script_tags(app) }} ( line 19 ) for the script tags in JavaScript blocks

In our public folder directory, Encore generates a folder called entrypoints.json it holds a JSON object representing a map of the CSS and JS needed to make our application run. Our helper functions uses these paths to generate the scrips and stylesheet links for us.

There we have it!

Encore can do a whole lot more: minify files, pre-process Sass/LESS, support React, Vue.js.

You can find out more about it’s other features in the Encore docs, or… stay tuned for another on post ;)

Thanks for reading, hope this post was helpful!