How does webpack-encore works with symfony 5?

@mallory_cormier 

Webpack Encore is a wrapper for Webpack that simplifies the integration of Webpack into Symfony applications. It allows you to easily manage and compile your frontend assets such as JavaScript, CSS, and images within your Symfony project.

To use Webpack Encore with Symfony 5, you first need to install it using Composer. You can do this by running the following command in your Symfony project directory:

1

composer require symfony/webpack-encore-bundle

Once Webpack Encore is installed, you can create a webpack.config.js file in the root of your Symfony project where you can define your frontend asset build configuration. You can then use Encore's API to configure your asset builds, including loading JavaScript and CSS files, defining entry points, and setting output paths.

After configuring your asset builds, you can use Encore to build and generate your frontend assets by running the following command:

1

yarn encore dev

This command will compile your frontend assets based on the configuration you defined in webpack.config.js and save the compiled assets in the public/build directory of your Symfony project.

To include the compiled frontend assets in your Symfony templates, you can use the encore_entry_script_tags and encore_entry_link_tags Twig functions provided by the Webpack Encore Bundle. These functions will automatically include the appropriate HTML tags for your compiled assets in your templates.

Overall, using Webpack Encore with Symfony 5 provides a convenient and efficient way to manage and compile frontend assets in Symfony applications.