Webpack is the fundamental building block of all modern Javascript application frameworks. While being flexible and powerful its plain configuration can be quite hard to understand if you just want things to "work like expected". Symfony's opinionated webpack wrapper "Encore" allows you to setup a flexible asset pipeline with 20 lines of code. This talk and its supporting git repo shows some of the concepts and ends up with a fully working Symfony 3.3 application utilizing a ReactJS frontend. https://github.com/elmariachi111/encore-demo

1. Webpack Encore*
Asset management for the rest of us
*by symfony
Stefan Adolf
https://www.facebook.com/stadolf
https://twitter.com/stadolf
https://github.com/elmariachi111
https://www.linkedin.com/in/stadolf/

2. The frontend frontier
Lots of quirks, lots of
frameworks
LESS, Sass & Scss
PostCss, Autoprefixer,
Reboots, (Compass)…
No native package
system
Many flavors, many
frameworks
ECMAScript 6/7,
TypeScript, CommonJS
jQuery, React (JSX),
Angular, Meteor

3. everything boils
down to this:

4. Where we come from

5. Where we want to go

6. Where we are.

7. Repo Read Along
Gist
Pull Requests

8. Webpack
Support for window
globals
Babelify for ES6/7
require scss, images,
xml, templates

9. Webpack
Import styles from
node_modules
Automatic asset
detection
& extraction

10. Webpack
initial bundling setup == no-brainer
Everything is based on Javascript
require scss, images, xml, templates
-> transformed by webpack loaders
LOTS of plugins and loaders available
Bundling process is highly configurable
Used by all major modern JS app frameworks
angular, vuejs, react, ionic

11. Where we are :/

12. Webpack Encore
Brought to you by Symfony but
plain JavaScript at heart
Replaces assetic bundle (dumped in 3.0)
generates webpack configuration
Opinionated “recipes” how fullstack
developers build assets.
Support for many modern features and
frameworks out of the box.

13. npm install ——save-dev
@symfony/webpack-encore
https://symfony.com/blog/introducing-
webpack-encore-for-asset-management
http://symfony.com/doc/current/
frontend.html

14. Where we are :/

15. Meaningful error messages
and installation hints

16. You can still use Webpack
plugins if you need them

17. and then
npm install
react-dom prop-types babel-preset-react

18. ENCORE!

20. Symfony integration (> 3.3)
base.html.twig
config.yml
manifest.json

21. SORRY, NO
ENCORE HERE.
Stefan Adolf
https://www.facebook.com/stadolf
https://twitter.com/stadolf
https://github.com/elmariachi111
https://www.linkedin.com/in/stadolf/
I am
https://github.com/elmariachi111/encore-demo/pulls