Webpack Encore: Lessons learned 1 year later

Webpack Encore lessons learned 1 year later

> 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

@weaverryan PART 1 Webpack & Encore Powerful and Easy! (until
they’re not)

What *is* Webpack? @weaverryan

@weaverryan   // app.js    require('jquery');  require('./another_file');    require('./styles.css');   
  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 ﬁle

@weaverryan AND A totally new (and modern) way of thinking
about your assets. Hint: Unlearn everything you know about JavaScript and global variables

@weaverryan Encore is a Node library … but we recommend
installing the “encore” Composer package (it comes with a nice recipe)

composer require encore --dev

dependencies Webpack conﬁg a few ﬁles to get you started
{

{  "devDependencies": {  "@symfony/webpack-encore": "^0.20.0",  "webpack-notifier": "^1.6.0"  },  "scripts": { 
"dev-server": "encore dev-server",  "dev": "encore dev",  "watch": "encore dev --watch",  "build": "encore production"  }  }  package.json

// webpack.config.js  var Encore = require('@symfony/webpack-encore');    Encore  .setOutputPath('public/build/')  .setPublicPath('/build') 
  .addEntry('app', './assets/js/app.js')  ;    module.exports = Encore.getWebpackConfig(); 

assets/js/app.js require('../css/app.css');    console.log('Edit me in assets/js/app.js');  assets/css/app.css body { 
background-color: pink;  } 

A new node_modules/ directory is now FULL of dependencies

<html>  <head>  {% block stylesheets %}  <link rel="stylesheet" href="{{ asset('build/app.css')
}}">  {% endblock %}  </head>  <body>  {% block body %}{% endblock %}  {% block javascripts %}  <script src="{{ asset('build/app.js') }}"></script>  {% endblock %}  </body>  </html> 

Best Practice: Make your CSS a Dependency of your JavaScript
“app” @weaverryan

Best Practice: Create one “entry” that is included in your
layout @weaverryan

@weaverryan Game-Changing Feature: Modules & imports

// assets/js/app.js  const getRandomWord = require('./common/random_word');    console.log('The word of
the day is: '+getRandomWord())  // assets/js/common/random_word.js  module.exports = function() {  const words = ['foo', 'bar', 'baz'];    return words[Math.floor(Math.random() * words.length)];  } 

Or… @weaverryan

// assets/js/app.js  - const getRandomWord = require(‘./common/random_word'); + import getRandomWord
from './common/random_word';    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'];    return words[Math.floor(Math.random() * words.length)];  } 

Best Practice: Organize your code into reusable “modules”. Your entry
ﬁle is your “controller” @weaverryan

// assets/js/app.js  import displayRandomWord from './common/display_random_word';    const el =
document.getElementById('lucky-word');  displayRandomWord(el);  // assets/js/common/display_random_word.js  import getRandomWord from './random_word';    export default function displayRandomWord(el)  {  const randomWord = getRandomWord();  el.innerHTML = 'The lucky word is '+randomWord;  }  // assets/js/common/random_word.js  export default function() {  const words = ['foo', 'bar', 'baz'];    return words[Math.floor(Math.random() * words.length)];  } 

Problem: My displayRandomWord() function outputs an HTML element that needs
some CSS @weaverryan

/* assets/css/app.css */  body {  background-color: lightgray;  }    .lucky-word
{  font-weight: bold;  } Sure… that technically works great…

// assets/js/common/display_random_word.js  import getRandomWord from './random_word';  import '../../css/lucky_word.css';    export
default function displayRandomWord(el)  {  const randomWord = getRandomWord();  el.innerHTML = `The lucky word is  <span class="lucky-word">${randomWord}</span>`;  }  /* assets/css/lucky_word.css */  .lucky-word {  font-weight: bold;  }

Best Practice: Each module is its own, unique snowﬂake: design
each to import its own dependencies @weaverryan

/* assets/css/lucky_word.css */  @font-face {  font-family: 'Sweet Pea';  src: url('../fonts/Sweet
Pea.ttf');  }    .lucky-word {  font-weight: bold;  font-family: 'Sweet Pea';  }

> yarn encore dev --watch

Cool Story: But I’m not building an SPA: I have
multiple pages @weaverryan

// assets/js/checkout.js  import '../css/checkout.css'    import CheckoutApp from './checkout/CheckoutApp';   
const checkoutApp = new CheckoutApp();  checkoutApp.render();  Page-Speciﬁc JS & CSS

// webpack.config.js  var Encore = require('@symfony/webpack-encore');    Encore  .setOutputPath('public/build/')  .setPublicPath('/build') 
  .addEntry('app', './assets/js/app.js')  .addEntry('checkout', './assets/js/checkout.js')    // ...  ;    module.exports = Encore.getWebpackConfig(); 

> yarn encore dev --watch

{# templates/default/checkout.html.twig #}  {% extends 'base.html.twig' %}    {% block
body %}  <h1>Checkout!</h1>  {% endblock %}    {% block stylesheets %}  {{ parent() }}    <link rel=“stylesheet" href="{{ asset('build/checkout.css') }}">  {% endblock %}    {% block javascripts %}  {{ parent() }}    <script src="{{ asset('build/checkout.js') }}"></script>  {% endblock %}

Best Practice: Treat each entry, each “page” a standalone JavaScript
app @weaverryan

@weaverryan PART 2 jQuery Where things fall apart

So you want jQuery? No problem! @weaverryan

> yarn add jquery --dev // assets/js/app.js    // ... 
import $ from 'jquery';    $('a.external').on('click', function() {  // ...  });  Loads from node_modules/

Best Practice: Require jquery like any other module @weaverryan

What’s the diﬀerence between:   import $ from 'jquery';   
<script src="https://code.jquery.com/jquery.js"> </script> and… Everything.

// jquery.js    jQuery = // a bunch of code
to create the jquery object    if ( typeof module.exports === "object" ) {  module.exports = jQuery;  } else {  window.jQuery = jQuery;  window.$ = jQuery;  } In Webpack? NO GLOBAL VARIABLES

@weaverryan All (most) JavaScript libraries change their behavior based *how*
they are included

jQuery Plugins? Things get weirder… @weaverryan

> yarn add bootstrap --dev // assets/js/app.js  import $ from
'jquery';  import 'bootstrap';    $('.add-tooltip').tooltip();  jQuery plugins do not export anything … they modify the jQuery object & add things

// bootstrap.js  if(typeof module !== 'undefined') {  var jQuery =
require('jquery');  } else {  var jQuery = window.jQuery;  }    // bootstrap modifies jQuery many jQuery plugins correctly require the jquery module

Some jQuery plugins are *not* written correctly @weaverryan

> yarn add jquery-tags-input --dev // app.js  import $ from
'jquery';  import 'jquery-tags-input';  import 'jquery-tags-input/dist/jquery.tagsinput.css';    $('#tags').tagsInput(); you can require speciﬁc ﬁles inside node_modules/jquery-tags-input

// jquery.tagsinput.js  jQuery.fn.tagsInput = function() {  // ...  } …
some jQuery plugins assume jQuery will always be available globally

@weaverryan Fix the bad library: Encore.autoProvidejQuery()

// webpack.config.js  var Encore = require('@symfony/webpack-encore');    Encore  // ... 
.autoProvidejQuery()  ;    module.exports = Encore.getWebpackConfig();  // jquery.tagsinput.js  + require('jquery').fn.tagsInput = function() {  - jQuery.fn.tagsInput = function() {  // ...  } Webpack rewrites the bad code

Brilliant! We ﬁxed the bad code! … now WE can
write bad code too! @weaverryan

// assets/js/checkout.js    // jQuery was never required  // "$"
should be an undefined variable // but this WILL work  $('a.external').on('click', function() {    }); Ryan says: BOOOOOOOOO

Best Practice: (duplicate form earlier!) Treat each entry, each “page”
a standalone JavaScript app @weaverryan

var Encore = require('@symfony/webpack-encore');    Encore  .addEntry('shared', './assets/js/shared.js')  .addEntry('vendor', ['jquery',
'react'])  .addEntry('jquery.tags', 'jquery-tags-input')  .addEntry('bootstrap', 'bootstrap')  .addEntry('custom_modal', './assets/custom_modal.js')  .addEntry('top_nav', './assets/js/top_nav.js')  .addStyleEntry('layout', './assets/css/layout.css')  .addStyleEntry('header', './assets/css/header.css')  ;    module.exports = Encore.getWebpackConfig();  Nope! 1 entry per page. Each entry works independently and requires what it needs.

var Encore = require('@symfony/webpack-encore');    Encore  .addEntry('shared', './assets/js/shared.js')  .addEntry('vendor', ['jquery',
'react'])  .addEntry('jquery.tags', 'jquery-tags-input')  .addEntry('bootstrap', 'bootstrap')  .addEntry('custom_modal', './assets/custom_modal.js')  .addEntry('top_nav', './assets/js/top_nav.js')  .addStyleEntry('layout', './assets/css/layout.css')  .addStyleEntry('header', './assets/css/header.css')  ;    module.exports = Encore.getWebpackConfig();  addStyleEntry() is a hack

@weaverryan PART 3 Creating an Eﬃcient Build Code Splitting

Yo! Don’t worry, I’ll build and wire up the ﬁnal
code correctly for you. It’s going to be awesome!

> yarn encore production } Woh! So many jQueries!

// 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 ﬁles

@weaverryan Webpack 4 The shared entry is dead!

// 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 So now what?

@weaverryan Introducing… Webpack Encore 0.21.0

@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

@weaverryan Runtime Chunk If you have more than 1 entry,
you should probably use a runtime chunk.

// webpack.config.js  Encore  // ...  .enableSingleRuntimeChunk()  ;    module.exports =
Encore.getWebpackConfig();  {# templates/base.html.twig #}  {% block javascripts %}  <script src="{{ asset('build/runtime.js') }}"></script>  <script src="{{ asset('build/app.js') }}"></script>  {% endblock %}  With a runtime chunk, if multiple entry ﬁles require the same module, they receive the same object

// 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 :)

Ok cool, what about optimizing my build? @weaverryan

// 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.

// webpack.config.js  Encore  // ...  + .addEntry('app', './assets/js/app.js')  - .createSharedEntry('app',
'./assets/js/app.js')  .addEntry('checkout', ‘./assets/js/checkout.js') .splitEntryChunks()  ; But now enable splitEntryChunks()

> yarn encore production

{% block javascripts %}  <script src="{{ asset('build/runtime.js') }}"></script>  <script src="{{
asset('build/vendor~a33029de.js') }}"></script>  <script src="{{ asset('build/vendor~ea1103fa.js') }}"></script>  <script src="{{ asset('build/app.js') }}"></script>  {% endblock %} All of these ﬁles are needed to for the “app” entry to function How are we supposed to know what script & link tags we need?

@weaverryan Introducing… WebpackEncoreBundle

composer require symfony/webpack-encore-bundle (will be included in the “encore” pack
soon) {# base.html.twig #}  {% block stylesheets %}  {{ encore_entry_link_tags('app') }}  {% endblock %}    {% block javascripts %}  {{ encore_entry_script_tags('app') }}  {% endblock %} 

{# checkout.html.twig #}  {% block stylesheets %}  {{ parent() }} 
  {{ encore_entry_link_tags('checkout') }}  {% endblock %}    {% block javascripts %}  {{ parent() }}    {{ encore_entry_script_tags('checkout') }}  {% endblock %}

{  "app": {  "js": [  "build/runtime.js",  "build/vendors~a33029de.js",  "build/vendors~ea1103fa.js",  "build/app.js"  ], 
"css": [  "build/vendors~ea1103fa.css",  "build/app.css"  ]  },  "checkout": {  "js": [  "build/runtime.js",  "build/vendors~a33029de.js",  "build/vendors~11e1498d.js",  "build/checkout.js"  ],  "css": [  "build/checkout.css"  ]  }  }

Dynamic Code Splitting @weaverryan

// app.js  $('a.external').on('click', function(e) {  import('./common/external_linker').then(linker => {  linker.default(e.currentTarget);  }); 
});  // assets/js/common/external_linker.js  import $ from 'jquery';  import '../../css/external_link.css';    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 ﬁle!)

@weaverryan Putting it all together

Best Practice: Create one “entry” that is included in your
layout @weaverryan

Best Practice: Treat each entry, each “page” a standalone JavaScript
app @weaverryan

Best Practice: Organize your code into reusable “modules”. Your entry
ﬁle is your “controller” @weaverryan

Best Practice: Each module is its own, unique snowﬂake: design
each to import its own dependencies @weaverryan

Best Practice: Make your CSS a Dependency of your JavaScript
“app” @weaverryan

Best Practice: Require jquery like any other module (even if
autoProvidejQuery allows you to cheat) @weaverryan

Best Practice: Use the new splitEntryChunks() to make your multi-entry
build performant @weaverryan

Thank You! Ryan Weaver @weaverryan https://symfonycasts.com/encore

Webpack Encore: Lessons learned 1 year later

Webpack Encore: Lessons learned 1 year later

More Decks by weaverryan

Other Decks in Technology

Featured

Transcript