Symfony News

Introducing Webpack Encore for Asset Management

If you write front end code, this might sound familiar:

Ryan is excited to write a killer front end (maybe with React or Vue.js!). But first, he needs to install Webpack... and configure loaders. And Ryan definitely wants to use SASS, so he should configure sass-loader and setup ExtractTextWebpackPlugin to output CSS files. Oh, and don't forget to output source maps! And is everything being minified in production? Wow, that's a lot of setup!

For everyone that has hit this barrier, I'm very excited to show you something we've been working on for the last few months: Webpack Encore.

Encore gives you powerful CSS and JavaScript processing, combination, minification and a lot more, wrapped up in a simple API that's built on an industry-standard tool (Webpack). Write some expressive JavaScript, then let Webpack do the rest:

// webpack.config.js
var Encore = require('@symfony/webpack-encore');

Encore
    .setOutputPath('web/build/')
    .setPublicPath('/build')

    // read main.js     -> output as web/build/app.js
    .addEntry('app', './assets/js/main.js')
    // read global.scss -> output as web/build/global.css
    .addStyleEntry('global', './assets/css/global.scss')

    // enable features!
    .enableSassLoader()
    .autoProvidejQuery()
    .enableReactPreset()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning() // hashed filenames (e.g. main.abc123.js)
;

module.exports = Encore.getWebpackConfig();

Encore is inspired by Webpacker and Mix, but stays in the spirit of Webpack: using its features, concepts and naming conventions for a familiar feel. It aims to solve the most common Webpack use cases. It works great with Symfony, but can be used in any app, in any language.

You can already use Encore today: Webpack Encore Docs! It does not (yet) have a stable 1.0 release, but the CHANGELOG will be updated for each new version. See a feature that's missing or find a bug? Help move this community project forward on GitHub symfony/webpack-encore.

Why Webpack Encore?

When you use Symfony, we want to make it simple to leverage the best tools from beginning to end. That's why, for assets, Symfony 2.0 came with Assetic: a pure PHP library. In 2011, this made sense. In 2017, life is much different.

Now, the best-practice tools for processing assets are written in Node.js. And Webpack is a clear leader. Since we want to recommend the highest quality tools, we recommend Webpack.

There's just one problem: configuring Webpack is not simple. So, Encore was born: as a thin tool that help make the best library (Webpack) accessible to everyone. Encore generates the standard webpack.config.js file, uses native Webpack features and stays consistent with its language and concepts. Instead of creating "yet another library", we embrace Webpack.

Try it out and help us make front-end setup powerful, but accessible to everyone.

Thanks to community members stof, javiereguiluz, tucksaun, lyrixx and others who helped review and bootstrap the original version of Encore.

Encore inside Symfony

While Encore will work great in any project, it works especially well in Symfony, thanks to the JSON manifest strategy that's new in Symfony 3.3. By adding one new line to config.yml, you can add versioning and configure a CDN in Encore without changing anything else in your app.