Tip
This tutorial covers Webpack 3 But don't worry! The vast majority of the concepts are still the same. So, if you want to learn Webpack & module loading, you're still in the right place. The biggest differences are in the CommonsChunkPlugin area.
In JavaScript, if you're still manually including each JavaScript file you depend on with a script tag... there's a better way! ES6 introduced the concept of modules: the ability (finally!) to isolate our JavaScript into small components that live in different files (like we do with classes in JavaScript).
But, to get this to work on the web, we need some help. We need something that's able to read our imports and aggregate everything we need into a single JavaScript file. We need webpack:
Using npm... and then yarn for package management
Webpack setup: package all modules into a single file
Calling Babel from webpack via a loader
Webpack dev tools for fast development
Webpack Hot Reloading!?
Handling multiple files ("entry points")
Using Uglify and prepping for production
Cache-busting with hashed filenames
CommonsChunkPlugin: package common modules together
Loading & Packaging CSS/SCSS & images form JavaScript!?
And most importantly: become empowered to (finally) write organized JavaScript!
Overview
Syllabus
- 01. The Power of require
- 02. Your First Webpack
- 03. webpack.config.js
- 04. watch + Install jQuery with Yarn
- 05. Requiring SweetAlert2
- 06. Modularize our Code
- 07. Multiple Entries / Pages
- 08. Legacy Libraries & global jQuery
- 09. ProvidePlugin & Global Vars
- 10. babel-loader
- 11. babel-loader Options & Polyfill
- 12. Require CSS Files
- 13. Images in CSS (file-loader)
- 14. Bootstrap CSS & Fonts
- 15. Font Awesome & file-loader [hash]
- 16. copy-webpack-plugin
- 17. Sass with sass-loader
- 18. Bootstrap Sass & resolve-url-loader
- 19. Tweaking Bootstrap's Sass
- 20. Sourcemaps & Debugging
- 21. jQuery & Legacy JS in your Template
- 22. Passing Server Data to JS
- 23. FOSJsRoutingBundle
- 24. Lodash & requiring Partial Libraries
- 25. ES6 import & export
- 26. CommonsChunkPlugin: Shared/Vendor Entry
- 27. Optimizing the "Commons" Chunk
- 28. webpack-dev-server
- 29. Hot Module Replacement
- 30. extract-text-webpack-plugin
- 31. Production Build
- 32. Minify CSS & DefinePlugin
- 33. Versioning & Cache Busting
- 34. Versioning manifest.json
- 35. Versioning Optimizations
- 36. Code Splitting
- 37. Webpack Visualizer
Taught by
Ryan Weaver