Webpack: Transpiling and Bundling JavaScript
Webpack, touted as a bundler, is a robust compiler platform. In this course, you'll learn the basics of transpiling and bundling JavaScript.
What you'll learn
Webpack is the most prevalent bundler for front-end web app development, but more than that, it's a compiler platform. It's everything you need to write modern, modular web applications. In this course, Webpack: Transpiling and Bundling JavaScript, you'll learn the basics of bundling, how to setup a rapid development environment that instantly updates with hot module replacement, and how to parameterize Webpack to optimize production builds for the fastest user experience. First, you'll learn how to integrate the babel-loader so you can write modern JavaScript while providing support for a wide variety of legacy browsers. Next, you'll write several custom loaders, including a code generation loader. Finally, you'll discover how source maps make troubleshooting a breeze. Once you've finished this course you'll understand how Webpack works, what benefits it affords, and how to setup a robust build process to optimize both development and production environments.
Table of contents
- Welcome 1m
- Interactive Coding with Hot Module Replacement 5m
- Seamless Compilation 4m
- Consistent Tooling 1m
- Modularity 1m
- Benefit - Bundling for Performance 5m
- Sophisticated Bundling 2m
- npm Install, Import, Go! 2m
- Help with Caching 2m
- Source Maps Through Any Number of Transformations 2m
- A Compiler Platform 4m
- Course Series and Updates 3m
- Cloning and Starting the Solitaire App 1m
- The Legacy Solitaire App Structure 3m
- Performance Problems in the Solitaire App 2m
- Bundling app.js 3m
- Inspecting and Using the App Bundle 3m
- IIFEs Are No Longer Necessary 1m
- Migrating a Second Module to the Bundle 2m
- Webpack Polyfills Module Loading 3m
- Webpack Polyfills Use Strict for Harmony Modules 1m
- Learning from Webpack Source Code 3m
- Generating an Interactive Graph of Modules 4m
- Challenge 3m
- Benefits of Watch and WDS 2m
- Watch Mode 3m
- Installing webpack-dev-server 1m
- npm run-scripts for Documenting Webpack Commands 2m
- Composing npm Scripts 1m
- Adding a webpack.config.js File 3m
- devServer.contentBase - Set Location of Static Content on Disk 5m
- devServer.publicPath - Set Base URL to Serve Webpack Output 3m
- devServer.watchContentBase - Reload on Static File Changes 2m
- Webpack Configuration Documentation 1m
- Looking Under the Hood of the DevServer 4m
- Hot Module Replacement Overview 2m
- devServer.hot and the HotModuleReplacementPlugin 2m
- Reload Fallback 1m
- Automatic Restart After Changing webpack.config.js 1m
- Disable Reload Fallback 2m
- output.publicPath 1m
- Identifying Modules by Name with the NamedModulesPlugin 1m
- Hot Swapping Methods in a Live Application 3m
- Hot Swapping Can Maintain State 2m
- Inspecting Hot Updates 1m
- Recap 1m
- Intro 1m
- HMR Plugin Bloats Production Builds 4m
- Conditionally Adding Plugins with NODE_ENV Environment Variable 3m
- cross-env and dotenv Help with Cross-platform Env Vars 2m
- Using a CLI Argument to Set the Environment 3m
- Environment Option Uses yargs 1m
- Multiple and Named Configurations 2m
- Modularizing Config Files 2m
- webpack-merge to Merge Configuration Objects 2m
- Inspecting the Merged Configuration and Config Defaults 2m
- Conditional Code with the DefinePlugin 2m
- Careful to Quote String Constants 2m
- Passing Env Options or Variables Through to Code Constants 2m
- Touch-ups and Recap 2m
- Intro 1m
- Installing Relevant Babel Packages 2m
- Why @babel/preset-env 4m
- Using ES6 Class Syntax 2m
- Adding a babel-loader Rule 2m
- webpack-dev-server Adds Modules to the Bundle 2m
- Excluding node_modules from babel-loader 2m
- Adding @babel/preset-env to Transform Classes 1m
- Do Not Transform Harmony Imports and Exports 3m
- devServer.overlay - Showing Compilation Errors in the Browser 2m
- Understanding Browserslist Queries 4m
- Extracting .babelrc.js 3m
- babel-loader Works with .babelrc.js Too 1m
- Disabling babel-loader in Development Builds 3m
- How to Tell babel-loader to Ignore .babelrc 1m
- Polyfills 3m
- Webpack Runtime Uses Promises That Might Need to Be Polyfilled 1m
- devServer.host - Configuring External Access to WDS 1m
- Enable Transpilation in Development as Needed 1m
- Fix Polyfill Issues by Reproducing the Problem 1m
- Webpack Makes Using npm Packages Facile 3m
- Studying the Impact of @babel/polyfill 2m
- Testing the Promise Polyfill 1m
- Reducing Polyfills with core-js 3m
- Reducing Polyfills to Just Promise 3m
- You Don't Need to Manually Triangulate Polyfills 2m
- useBuiltIns: 'entry' - Polyfill Based on Target Browsers 3m
- Changing Browser Query Changes Polyfills 1m
- useBuiltIns: 'usage' - Polyfill Based on Target Browsers and Usage 2m
- Using the Promise Built-in Adds Another Polyfill for IE 11 1m
- Someday: @babel/plugintransform-runtime + @babel/preset-env 3m
- Takeaways 1m
- What Is a Loader? 2m
- Designing a tee-loader 2m
- Creating a tee-loader 2m
- resolveLoader.alias to Resolve a Custom Loader 2m
- Logging Request and Source per Module 1m
- Collapsing Grouped Webpack Console Output with Chrome DevTools 2m
- Debugging Webpack with Chrome DevTools 1m
- Adding the Same Loader Twice 1m
- Passing and Parsing Options in the tee-loader 2m
- Legacy Option Passing via a Query String 1m
- Inline Loaders Are Occasionally Useful 3m
- Learn More by Building Loaders - Try a Pitching Cache Loader 3m
- Bundling and Transpiling Make Troubleshooting Difficult 1m
- Runtime Errors Aren't as Transparent as Compilation Errors 3m
- Enabling Source Maps with devtool: "source-map" 2m
- How devtool: "source-map" Works 5m
- Fast, Inline, Partial Source Maps - devtool: "eval" 5m
- High Quality Maps with Fast Incremental Rebuild - devtool: "eval-source-map" 5m
- devtool: "hidden-source-map" 4m
- Only Map Location and Filename, Not Source Code - devtool: "nosources-source-map" 2m
- Resources 4m
- devtool Is Just an Idiosyncratic, String Based Serialization of Plugin Options 7m
- Add the SourceMapDevToolPlugin Directly for Flexibility Instead of Using devtool 3m
About the author
Wes Higbee is passionate about helping companies achieve remarkable results with technology and software. He’s had extensive experience developing software and working with teams to improve how software is developed to meet business objectives. Wes launched Full City Tech to leverage his expertise to help companies delight customers. Although his primary focus is on outcomes, implementation often includes technical competency. Wes frequently speaks about impactful aspects of software developm... more