Discover how a webpack loader performs a transformation, a webpack plugin is a webpack class that handles more complex tasks, and the CommonsChunkPlugin looks for shared code between files and creates a commons bundle.
- [Instructor] In the previous video, we looked at how…multiple entry points can allow for smaller bundle sizes.…To take these optimizations one step further,…we can use a Webpack plugin called the Commons Chunk plugin.…This is the first time we've talked about a plugin.…A loader, as we see in all of these rules here,…performs some sort of transformation.…A plugin is a Webpack class that can do a little bit more.…The Commons Chunk plugin will look for reused code…and it will create a separate bundle that has common code.…
It will load the common code into the page first…and then load in specific page code after that.…So let's make an adjustment to our webpack.config here…and the first thing I'm going to do…is actually require Webpack.…So we're going to say const webpack = require("webpack").…Then we want to add a key for our plugins.…So right beneath module, we're going to add that.…So here on line 51, I'm going to hit the comma and then enter…and we're going to say plugins.…
Plugins is going to be an array…
- What is webpack?
- Running webpack from the command line
- Setting up loaders
- Loading CSS
- Compiling SCSS
- Using webpack plugins
Skill Level Intermediate
1. What is webpack?
2. webpack Loaders
3. webpack and CSS
4. webpack Plugins
Next steps1m 1s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.