
Learn how webpack uses the entry and output properties in webpack.config.js, and how to generate an absolute bundle.js path with path.resolve and __dirname for a build folder.
Wire up babel in Webpack 2 by configuring the module rules to apply the babel loader only to JavaScript files, avoiding css and other assets in the Webpack config.
Explore how to use the style and CSS loaders in Webpack to import CSS into JS files, style components like image_viewer, and bundle the styles with the project.
Learn to style an image viewer by creating image_viewer.css, importing it into the js; configure webpack with css-loader and style-loader, install them via npm, and inject css into the bundle.
Learn to optimize images in Webpack 2 using image-webpack-loader and url-loader to compress images and inline small ones into bundle.js, or emit larger files with a 40,000-byte limit.
Define output.publicPath in the webpack config as 'build/' to fix the url loader's image paths, then rebuild to see assets load from the build directory.
Practice code splitting in webpack by loading the image_viewer module only after a user clicks a button in index.js, enabling a two-file setup that loads the image on demand.
Clean and optimize your build workflow by adding a cross-platform rimraf clean step that deletes the dist directory before every build, preventing duplicate bundles and manifest files.
Learn how to deploy Webpack applications by serving static front-end assets or a back-end with an intermediary server, and compare hosting options from surge to AWS and Heroku.
Learn to integrate Node and Webpack, using Webpack middleware for development and static asset serving in production, building assets once and serving from a distribution directory via an Express server.
Webpack is the premier build tool for React and Angular 2 applications.
Deployment? Covered. Performance optimizations? We got it. Custom boilerplate creation? Its here!
Webpack is notorious for being tricky to configure correctly. In this course you'll master each major feature of Webpack and learn how to optimize it for your own app. Webpack has a wealth of fancy features, but each requires in depth knowledge of how they work. This course is the most comprehensive Webpack course you'll find online, and the only full course on the popular version 2 edition of Webpack.
This course will get you up and running quickly, and teach you the core knowledge you need to deeply understand and build Webpack-based projects.
Tired of downloading boilerplates packages with no idea how to change them?
React and Angular 2 have seen standalone boilerplate packages flourish, but they come with dense configuration setups that make them challenging to change. With the experience you gain in this course you'll be able to customize your projects to suit your particular needs.
So much content!
Webpack can be confusing to learn, but after taking this course you'll understand that it is a tool that requires just a bit of concentration to master. Once you hear my explanations of Webpack, you'll come to realize that each concept is straightforward, and only requires the smallest touch of patience to comprehend. No filler here, just laser focus on the most important aspects of Webpack.
I always build courses I would want to take, and this is no exception. Every topic is explained in great detail with accompanying diagrams and examples. You'll learn the back story of each feature and learn where to apply them to solve real world problems.