Discover how the babel-loader can help us transpile the latest JavaScript code into JavaScript that is more compatible with browsers. Learn that when we set up babel-loader with webpack, the configuration will handle this automatically each time we run we
- [Instructor] The first loader that we're…going to set up here is the babel loader.…One of the most popular loaders out there,…it compiles all of our new JavaScript…into JavaScript that will work in most browsers.…So let's go ahead and…adjust our webpack and figfile here.…And we're going to add another key called: module.…Now module is going to have rules inside of it.…And these rules are going to be held within an array.…Alright the next step we want to take here is…we're going to create another object.…
This is going to have a test value,…and what test is going to do is…tell webpack to match against a regular expression.…So we're going to say look for…all of the files that end in js.…Alright the next thing we want to do here…is tell it what to exclude.…So we're going to exclude the node module's folder,…we're not going to transform everything in there…or that would take all day.…We then are going to specify which loader…we want to use on these JavaScript files.…
So in this case we're going to use the babel loader.…
Author
Released
12/4/2017- What is webpack?
- Running webpack from the command line
- Setting up loaders
- Loading CSS
- Compiling SCSS
- Using webpack plugins
Skill Level Intermediate
Duration
Views
Related Courses
-
Workflow Tools for Web Developers
with Christina Truong1h 13m Intermediate
-
Introduction
-
Welcome34s
-
-
1. What is webpack?
-
What is webpack?1m 59s
-
Installing webpack3m 1s
-
Creating a webpack config3m 40s
-
Using npm build scripts1m 18s
-
Using a watch command2m 1s
-
-
2. webpack Loaders
-
What is a loader?1m 17s
-
Setting up babel-loader3m 40s
-
Using babel presets2m 44s
-
Using babel-loader for React4m 12s
-
-
3. webpack and CSS
-
Loading CSS with webpack4m 44s
-
Compiling SCSS3m 17s
-
Loading images3m 22s
-
-
4. webpack Plugins
-
What is code splitting?1m 2s
-
Adding multiple entry points5m 52s
-
Bundling vendor files2m 41s
-
-
Conclusion
-
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.
CancelTake 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.
Share this video
Embed this video
Video: Setting up babel-loader