We use cookies on this site to enhance your user experience. By clicking "OK, I Agree" or using our site, you consent to the use of cookies unless you have disabled them. View our cookie policy to learn more.
OK, I AGREE

Webpack Encore: Frontend like a Pro!

2:10:39

What you'll be learning

Writing great PHP code but your JavaScript looks a little bit hacky? It's not your fault! Before Webpack, coding "correctly" in JavaScript... sorta wasn't possible!

But setting up Webpack can be a pain. So... hello Webpack Encore! Encore allows you to modern JavaScript starting... immediately! Go, go go!

  • Installing Encore & yarn
  • webpack.config.js & your first Webpack build!
  • Adding script & link tags thanks to WebpackEncoreBundle: encore_entry_script_tags() & encore_entry_link_tags()
  • Modules! require, import and export
  • Installing & using external libraries
  • jQuery plugins & global variables
  • Handling CSS! Including fonts & images
  • Code splitting: free, smart optimization
  • Sass & Overriding Bootstrap Sass Variables
  • Copying static files
  • Multiple "entries": page-specific CSS & JavaScript
  • PostCSS, Bower, browserslist, polyfills & new features in old browsers
  • enableSingleRuntimeChunk()?
  • Async imports!
Your Guides
Ryan Weaver
Login or register to track your progress!

Awesome! Keep up the good work in the
Javascript: Modern JavaScript section of the Javascript Track!

33 videos

JavaScript for PHP Geeks

19 videos

JavaScript for PHP Geeks: ES6/ES2015 (New JavaScript)

37 videos

JavaScript for PHP Geeks: Webpack for Module Loading Awesomeness

21 videos

Webpack Encore: Frontend like a Pro!

43 videos

JavaScript for PHP Geeks: ReactJS (with Symfony)

Questions? Conversation?

  • 2019-10-01 weaverryan

    Hey Shamshid!

    That's an excellent suggestion - I haven't played much with purge, but I've heard of it. I think getting it to work nicely requires (as you guessed) a bit of work... and I'm not sure it's worth it. I know Javier played with it for a bit, but ultimately decided not to use it. Here are some resources: https://github.com/symfony/... and https://github.com/symfony/...

    Cheers!

  • 2019-09-29 Shamshid

    great tutorial.

    You should bring usage of purgecss in Encore which will trim out unwanted css and most importantly we need to learn to make a config to which trims page specific css from dedicated css file. (kinda confusing what I told here)

  • 2019-06-03 weaverryan

    "pack" of knowledge 😂- yep, we're friends :D

  • 2019-06-01 Hessuss Hesiu Kowalski

    Hi Ryan, thanks for another amazing and hyuooOOOooough! huge pack of knowledge.

  • 2019-04-16 Alex Zerah

    Thanks for your answer Diego Aguiar
    I am waiting the course,

    Cheers!

  • 2019-04-15 Diego Aguiar

    Hey Alex Zerah

    First to clarify, this course is not about Jquery, but it's a very accepted library for the community, and there are many tricks you need to know about how to properly integrate it with Encore (and this is even more needed when working with Jquery plugins that are poorly written)

    Cheers!

  • 2019-04-15 Alex Zerah

    This seems very great!

    Something is bothering me.
    Why are you using jQuery? I am not saying it's not a good tool. If well configured the library can be awesome. But vanilla JS is powerful enough today to be used alone.