Kent walks through how to add Webpack along with the Babel and JSON loaders. He then creates the build scripts necessary for building the application with Babel and building the UMD version of the library. All the build scripts are joined with an “npm-run-all” script that will execute them in parallel. The code for this example is on the FEM/08.0-browser-build branch.
(flute)…- So there are a couple of dependencies…like I was saying you need.…You obviously need Web pack to run this.…And then you'll need the Babel loader and the json loader…to be able to use those with Webpack.…And so those are the things you would normally npm install.…But we'll just stick them right in here on Webpack.…And we could use the latest beta…but we actually don't need it.…So we'll use the latest version.…And we'll also stick the json loader right here.…
And that version I think you all have installed is…zero dot five dot four.…Then there's the Babel loader.…And the version you have is six dot two dot four.…With those things installed…then we're going to alter our build scripts a little bit.…So I'm going to change this original build…to be build main.…
We'll add another build.…That is build umd.…And then yet another one that is build um,…well, we'll add that other one here in a second.…But we'll have another one to build a mini-fied version…of umd.…So here we'll use the Webpack seal eye…and we're going to specify an output file name…
Note: This course was created by Frontend Masters. It was originally released on 08/09/2016. We're pleased to host this training in our library.
- Creating an open-source library
- Linting and testing
- Code coverage
- Installing and configuring Babel
- Peer dependencies
- Forking and renaming
- Continuous integration and automating releases
Skill Level Intermediate
1. Creating an Open-Source Library
2. Linting and Testing
3. Git Hooks, Babel, and Webpack
4. Continuous Integration and Automating Releases
- 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.