The document discusses webpack Encore, a tool for asset management in JavaScript applications, providing a streamlined way to configure module bundling and support for modern frameworks. It emphasizes the ease of setup, extensive configurability, and integration with various libraries and technologies. Additionally, the document highlights its ability to replace older asset management methods while still allowing for the incorporation of plugins.

1. Webpack Encore*
Asset management for the rest of us
*by symfony

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

3. In the end it boils
down to this:

4. Where we come from
<script src=“js/jquery.js”></script>
<script src=“js/mootools.js”></script>
<script src=“js/app.js”></script>
requirejs([‘jquery'], function( $ ) {
console.log( $ );
});
var unique = require('uniq');
var data = [2, 2, 3, 4, 5, 5, 5, 6];
console.log(unique(data));

5. Where we want to go

6. Where we are.

7. Webpack
Setting up module “bundling” == no-brainer
Everything is based on Javascript
Import scss, images, xml, templates
Webpack loaders: transforming
LOTS of plugins and loaders
Highly configurable
Used by all major modern JS app frameworks
angular, vuejs, react, ionic

8. Plain Webpack
Gist
Repo Read Along

9. Include npm libraries
Babelify es6/7
Globals
supported
Include styles
Include npm librariesExtracts css assets
Tooling & versioning
included

10. Where we are :/

11. WHAT IF I TOLD YOU
THAT WEBPACK CONFIGURATION
DOESN’T HAVE TO SUCK?

12. Where we are :/

13. Webpack Encore
“Symfony” by name, JavaScript at heart
Just a layer on top of webpack
Replaces assetic bundle (dumped in 3.0)
Opinionated “recipes” how fullstack
developers build assets.
Support for many modern features and
frameworks out of the box.

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

15. Meaningful error messages
and installation hints

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

17. Add react.js
npm install --save-dev react react-dom prop-types
babel-preset-react

18. Symfony integration (3.3)
framework:
assets:
base_path: "/dist"
json_manifest_path: "%kernel.project_dir%/web/
dist/manifest.json"
manifest.json
base.html.twig
config.yml

19. 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
https://gist.github.com/elmariachi111/f250c9d96280082e5c4f0abfd9fd6ede