Webpack Encore has been around for more than 1 year, and it's been a huge success! In this presentation, we'll learn some lessons from the past year and get a look at the brand new features supported in the latest version of Encore.
> Lead of the Symfony documentation team > Writer for SymfonyCasts.com > Symfony evangelist… Fanboy > Husband of the much more talented @leannapelham symfonycasts.com twitter.com/weaverryan Yo! I’m Ryan! > Father to my much more charming son, Beckett
console.log('Webpack will package all this up'); console.log('And output 2 files: app.js and app.css'); A tool that “packages” your app up into one CSS and one JS file
console.log('The word of the day is: '+getRandomWord()) // assets/js/common/random_word.js module.exports = function() { const words = ['foo', 'bar', 'baz'];
console.log('The word of the day is: '+getRandomWord()) // assets/js/common/random_word.js - module.exports = function() { + export default function() { const words = ['foo', 'bar', 'baz'];
// webpack.config.js Encore // ... - .addEntry('app', './assets/js/app.js') + .createSharedEntry('app', './assets/js/app.js') .addEntry('checkout', './assets/js/checkout.js') ; Anything in app.js will not be repackaged in any other entry files
// webpack.config.js Encore // ... - .addEntry('app', './assets/js/app.js') + .createSharedEntry('app', './assets/js/app.js') .addEntry('checkout', './assets/js/checkout.js') ; This will still work in Encore, but only because we hack it to work.
@weaverryan > Webpack 4 support > Runtime chunk > ”Split Chunks” support > browserlist support in package.json > Dynamic imports (code splitting) syntax support > Smarter version checking system > Babel 7 out of the box Webpack Encore 0.21.0
// app.js var $ = require('jquery'); require('bootstrap');
// checkout.js var $ = require('jquery'); $('.item').tooltip(); Will this work? Does the jquery module have the tooltip in checkout.js? enableSingleRuntimeChunk() Yes :D disableSingleRuntimeChunk() No :)
// webpack.config.js Encore // ... + .addEntry('app', './assets/js/app.js') - .createSharedEntry('app', './assets/js/app.js') .addEntry('checkout', './assets/js/checkout.js') ; Go back to the boring, original setup.
export default function(linkEl) { $(linkEl).addClass('clicked'); } The code from external_linker.js will not be included in the app.js It will be loaded via AJAX when needed (including the CSS file!)