Webpack Encore: Frontend like a Pro!

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!

• Hello Webpack Encore
• Webpacking our First Assets
• Twig Helpers, entrypoints.json & yarn Scripts
• Modules: require() & import()
• Importing External Libraries & Global Variables
• Bootstrap & the Curious Case of jQuery Plugins
• The Magic of Split Chunks
• Importing 3rd Party CSS + Image Paths
• Sass & Overriding Bootstrap Variables
• Copying Files
• Page-Specific JS: Multiple Entries
• Entry Refactoring
• Refactoring Autocomplete JS & CSS
• Auto-Provide jQuery for Mischievous Packages
• addStyleEntry(): CSS-Only Entrypoint
• Support any Browser with PostCSS & Babel
• browserslist: What Browsers do you need to Support?
• Polyfills & Babel
• The Single Runtime Chunk
• Async Imports
• Production Build & Deployment