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.

Installation:

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');
Encore
   // directory where compiled assets will be stored
   .setOutputPath('public/build/')
   // public path used by the web server to access the output path
   .setPublicPath('/build')
   .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.