Installing Encore

Installing Encore

First, make sure you install Node.js and also the Yarn package manager. The following instructions depend on whether you are installing Encore in a Symfony application or not.

Installing Encore in Symfony Applications

Run these commands to install both the PHP and JavaScript dependencies in your project:

  1. $ composer require symfony/webpack-encore-bundle
  2. $ yarn install

If you are using Symfony Flex, this will install and enable the WebpackEncoreBundle, create the assets/ directory, add a webpack.config.js file, and add node_modules/ to .gitignore. You can skip the rest of this article and go write your first JavaScript and CSS by reading Encore: Setting up your Project!

If you are not using Symfony Flex, you’ll need to create all these directories and files by yourself following the instructions shown in the next section.

Installing Encore in non Symfony Applications

Install Encore into your project via Yarn:

  1. $ yarn add @symfony/webpack-encore --dev
  3. # if you prefer npm, run this command instead:
  4. $ npm install @symfony/webpack-encore --save-dev

This command creates (or modifies) a package.json file and downloads dependencies into a node_modules/ directory. Yarn also creates/updates a yarn.lock (called package-lock.json if you use npm).

Tip

You should commit package.json and yarn.lock (or package-lock.json if using npm) to version control, but ignore node_modules/.

Creating the webpack.config.js File

Next, create a new webpack.config.js file at the root of your project. This is the main config file for both Webpack and Webpack Encore:

  1. var Encore = require('@symfony/webpack-encore');
  3. // Manually configure the runtime environment if not already configured yet by the "encore" command.
  4. // It's useful when you use tools that rely on webpack.config.js file.
  5. if (!Encore.isRuntimeEnvironmentConfigured()) {
  6.     Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
  7. }
  9. Encore
  10.     // directory where compiled assets will be stored
  11.     .setOutputPath('public/build/')
  12.     // public path used by the web server to access the output path
  13.     .setPublicPath('/build')
  14.     // only needed for CDN's or sub-directory deploy
  15.     //.setManifestKeyPrefix('build/')
  17.     /*
  18.      * ENTRY CONFIG
  19.      *
  20.      * Add 1 entry for each "page" of your app
  21.      * (including one that's included on every page - e.g. "app")
  22.      *
  23.      * Each entry will result in one JavaScript file (e.g. app.js)
  24.      * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
  25.      */
  26.     .addEntry('app', './assets/js/app.js')
  27.     //.addEntry('page1', './assets/js/page1.js')
  28.     //.addEntry('page2', './assets/js/page2.js')
  30.     // When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
  31.     .splitEntryChunks()
  33.     // will require an extra script tag for runtime.js
  34.     // but, you probably want this, unless you're building a single-page app
  35.     .enableSingleRuntimeChunk()
  37.     /*
  38.      * FEATURE CONFIG
  39.      *
  40.      * Enable & configure other features below. For a full
  41.      * list of features, see:
  42.      * https://symfony.com/doc/current/frontend.html#adding-more-features
  43.      */
  44.     .cleanupOutputBeforeBuild()
  45.     .enableBuildNotifications()
  46.     .enableSourceMaps(!Encore.isProduction())
  47.     // enables hashed filenames (e.g. app.abc123.css)
  48.     .enableVersioning(Encore.isProduction())
  50.     // enables @babel/preset-env polyfills
  51.     .configureBabelPresetEnv((config) => {
  52.         config.useBuiltIns = 'usage';
  53.         config.corejs = 3;
  54.     })
  56.     // enables Sass/SCSS support
  57.     //.enableSassLoader()
  59.     // uncomment if you use TypeScript
  60.     //.enableTypeScriptLoader()
  62.     // uncomment to get integrity="..." attributes on your script & link tags
  63.     // requires WebpackEncoreBundle 1.4 or higher
  64.     //.enableIntegrityHashes(Encore.isProduction())
  66.     // uncomment if you're having problems with a jQuery plugin
  67.     //.autoProvidejQuery()
  69.     // uncomment if you use API Platform Admin (composer require api-admin)
  70.     //.enableReactPreset()
  71.     //.addEntry('admin', './assets/js/admin.js')
  72. ;
  74. module.exports = Encore.getWebpackConfig();

Next, open the new assets/js/app.js file which contains some JavaScript code and imports some CSS:

  1. // assets/js/app.js
  2. /*
  3.  * Welcome to your app's main JavaScript file!
  4.  *
  5.  * We recommend including the built version of this JavaScript file
  6.  * (and its CSS file) in your base layout (base.html.twig).
  7.  */
  9. // any CSS you import will output into a single css file (app.css in this case)
  10. import '../css/app.css';
  12. // Need jQuery? Install it with "yarn add jquery", then uncomment to import it.
  13. // import $ from 'jquery';
  15. console.log('Hello Webpack Encore! Edit me in assets/js/app.js');

And the new assets/css/app.css file:

  1. /* assets/css/app.css */
  2. body {
  3.     background-color: lightgray;
  4. }

You’ll customize and learn more about these file in Encore: Setting up your Project.

Caution

Some of the documentation will use features that are specific to Symfony or Symfony’s WebpackEncoreBundle. These are optional, and are special ways of pointing to the asset paths generated by Encore that enable features like versioning and split chunks.

This work, including the code samples, is licensed under a Creative Commons BY-SA 3.0 license.