Warning: You are browsing the documentation for Symfony 4.1, which is no longer maintained.
Read the updated version of this page for Symfony 5.3 (the current stable version).
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¶
If your application is using Symfony Flex, run the following commands:
1 2 | $ composer require encore
$ yarn install
|
This will install and enable the WebpackEncoreBundle, add the assets/
directory, create a webpack.config.js file, and add node_modules/ to
.gitignore. If you are not using Symfony Flex, you’ll need to create all
this by yourself following the instructions shown in the next section.
Nice work! You can skip the rest of this article and go write your first JavaScript and CSS by reading Encore: Setting up your Project!
Installing Encore in non Symfony Applications¶
Install Encore into your project via Yarn:
1 2 3 4 | $ yarn add @symfony/webpack-encore --dev
# if you prefer npm, run this command instead:
# 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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | var 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')
// only needed for CDN's or sub-directory deploy
//.setManifestKeyPrefix('build/')
/*
* ENTRY CONFIG
*
* Add 1 entry for each "page" of your app
* (including one that's included on every page - e.g. "app")
*
* Each entry will result in one JavaScript file (e.g. app.js)
* and one CSS file (e.g. app.css) if you JavaScript imports CSS.
*/
.addEntry('app', './assets/js/app.js')
//.addEntry('page1', './assets/js/page1.js')
//.addEntry('page2', './assets/js/page2.js')
// will require an extra script tag for runtime.js
// but, you probably want this, unless you're building a single-page app
.enableSingleRuntimeChunk()
.cleanupOutputBeforeBuild()
.enableSourceMaps(!Encore.isProduction())
// enables hashed filenames (e.g. app.abc123.css)
.enableVersioning(Encore.isProduction())
// uncomment if you use TypeScript
//.enableTypeScriptLoader()
// uncomment if you use Sass/SCSS files
//.enableSassLoader()
// uncomment if you're having problems with a jQuery plugin
//.autoProvidejQuery()
;
module.exports = Encore.getWebpackConfig();
|
Next, create a new assets/js/app.js file with some basic JavaScript and
import some JavaScript:
1 2 3 4 5 | // assets/js/app.js
require('../css/app.css');
console.log('Hello Webpack Encore');
|
And the new assets/css/app.css file:
1 2 3 4 | /* assets/css/app.css */
body {
background-color: lightgray;
}
|
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.