Webpack Encore

Webpack Encore is a tool that simplifies using Webpack for building front-end assets in web applications. It also seamlessly integrates with Symfony applications.


To use Webpack Encore in your Symfony application, follow these steps:

  • Install the PHP and JavaScript dependencies by running the following commands:
    $ composer require symfony/webpack-encore-bundle
    $ npm install

Quickstart configuration (Symfony 7)

To start, create webpack.config.js inside the root of your project and add these lines.

// webpack.config.js
const Encore = require('@symfony/webpack-encore');
   // directory where compiled assets will be stored
   // public path used by the web server to access the output path
   .addEntry('app', './assets/myapp.js')

Compile your project using this command:

npm run dev

Webpack Encore will output the compiled files inside the public/build directory, the /build directory is the the public path (accessible from the browser) and the ./assets/myapp.js is the entry point to your JavaScript application. In this configuration the compiled app.js file will be created inside the /public/build directory.