Use Symfony Webpack Encore with Neos Flow

Symfony made Webpack Encore, a more straight forward integration of Webpack into your Symfony project. To quote itself

Encore is inspired by Webpacker and Mix, but stays in the spirit of Webpack: using its features, concepts and naming conventions for a familiar feel. It aims to solve the most common Webpack use cases.

https://symfony.com/doc/current/frontend.html

And thanks to the great eco system of open source software, we can use that with a Neos Flow project.

Install Webpack Encore

I will do this by using yarn commands, so you need yarn setup. NPM can basically do the same, so feel free to adjust.

In your projects package (In this case, named Vendor.Assets) run the command

yarn add @symfony/webpack-encore --dev

This creates a package.json file with the required package from above.

Configure Webpack

Copy/paste the webpack.config.js file from the installation guide and adjust the following

Paths

// directory where compiled assets will be stored
.setOutputPath('Resources/Public/')
// public path used by the web server to access the output path
.setPublicPath('/_Resources/Static/Packages/Vendor.Assets/')
.setManifestKeyPrefix('')

This till first tell Webpack Encore where to put generated files. Second, tell the generated manifest and entrypoint files, where the files are located. Note the Vendor.Assets path at the end. Change to your own package name. And then a blank prefix. The blank setting is required.

Entry

Add a entry in that section, like this

.addEntry('register', './Resources/Private/register.js')

As I create assets for a “Register” (Sign up) context of my project.

Use sass/scss?

If you uncomment this line

.enableSassLoader()

make sure to install sass-loader and sass by running this command

yarn add sass-loader@^10.0.0 sass --dev

To get the needed libraries.

Create entry file

The mentioned entry file, register.js must be created. For this example I only need to do scss work so my file is located in the Resources/Private/register.js path in my Vendor.Assets package and look like this

import './Register/Styles.scss';

Compile, run and watch

For webpack to build or watch your files, you should add a scripts section to your package.json

"scripts": {
  "watch": "webpack --watch --progress --colors",
  "build": "webpack --mode production --progress --hide-modules"
}

And from the root of your Vendor.Assets package you can run

yarn watch

and end up with a output like this

And webpack now watches your files, compile and create them as you do your work.

Copy/paste resources for you

webpack.config.js

var Encore = require('@symfony/webpack-encore');

if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore

.setOutputPath('Resources/Public/')
.setPublicPath('/_Resources/Static/Packages/Dafis.Assets/')
.setManifestKeyPrefix('')

.addEntry('register', './Resources/Private/register.js')
.splitEntryChunks()

.enableSingleRuntimeChunk()
.cleanupOutputBeforeBuild()
.enableSourceMaps(true)
.enableVersioning(false)

.configureBabelPresetEnv((config) => {
config.useBuiltIns = 'usage';
config.corejs = 3;
})
.enableSassLoader()
;

module.exports = Encore.getWebpackConfig();

package.json

{
  "devDependencies": {
    "@symfony/webpack-encore": "^0.33.0",
    "sass": "^1.32.2",
    "sass-loader": "^10.0.0"
  },
  "scripts": {
    "watch": "webpack --watch --progress --colors",
    "build": "webpack --mode production --progress --hide-modules"
  }
}