Webpack 2: The Complete Developer's Guide

Explore why webpack is essential for modern single-page applications, contrasting server-side templating with client-side JavaScript, and learn how bundling helps manage tens of thousands of lines of code.

Explore how JavaScript modules tackle large single-page applications by organizing code into many small files, improving navigation, maintainability, and team onboarding.

Learn how Webpack solves the challenges of modular JavaScript by merging many small modules into a single file, preserving load order and improving performance on mobile.

Set up an npm project, create two JavaScript modules, install and configure Webpack, and run it to inspect the build output while learning the JavaScript module system.

Learn how to link sum.js and index.js using CommonJS, and explore key module systems: CommonJS, AMD, and ES2015, within the webpack workflow.

Learn to link files with CommonJS by exporting a sum function in sum.js and importing it in index.js with require('./sum'), and anticipate migrating to ES2015 modules later.

Install webpack as a dev dependency and create a minimal webpack.config.js to define the entry point (src/index.js) and export a config object via module.exports to start bundling.

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.

Create a build script in package.json and run npm run build to execute Webpack on the project. Compare global vs local installs to see how bundle.js grows beyond its sources.

Explore how bundle.js aggregates modules into a myModules array and uses the entryPointIndex to run index.js, revealing Webpack's behind-the-scenes module wiring.

Learn to run a Webpack bundle in the browser by creating index.html that loads build/bundle.js and verifies the total via a console log.

Learn how Webpack bundles modules into a single bundle.js and uses loaders to preprocess files, including babel-loader with babel-core and babel-preset-env to transpile ES2015 code to ES5.

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.

Configure the babel loader within Webpack’s module rules, specifying a .js test and babel-preset-env via .babelrc to transform ES2015 code to ES5 in bundle.js.

Refactor from CommonJS to ES2015 modules using import and export default, after adding Babel to the build and verifying with the browser.

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.

Explains how css and style loaders inject styles into the bundle, how webpack updates the dom, and compares inlining css in bundle.js with generating a separate css file.

Extract CSS into a separate style.css file using extract-text-webpack-plugin to improve load performance, configuring extract, css-loader, and linking build/style.css in index.html.

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.

Configure Webpack to load images from an assets directory, import big.jpg and small.jpg, use lorempixel images, data URLs, and base64 in the bundle, and troubleshoot file not found issues.

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.

Discover code splitting in webpack by loading only the login form initially and loading dashboard code later to minimize initial bundle size.

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.

See how to load code on demand with System.import after a button click, using promises for asynchronous module loading and fetching the image_viewer module from the server, illustrating code-splitting.

Explore code splitting with System.import and Webpack, loading the image_viewer module on demand and rendering via module.default. See how Webpack creates extra bundle.js chunks loaded via Jsonp and script tags.

Explore advanced Webpack features in a real-world React project, cloning a GitHub repository, setting up dependencies with npm install, and testing larger-scale code splitting and Webpack optimization.

Add a babel loader to the webpack config with a module rules entry, a test regex, and an exclude for node_modules; a .babelrc specifies presets and prepares the styling pipeline.

Create a .babelrc with babel-preset-env and react, add style-loader and css-loader for css, then run npm run build with webpack to address the 3.28 megabyte bundle and consider code splitting.

Learn to reduce bundle size by code splitting vendor code from app code and leverage browser asset caching to speed initial and subsequent loads.

Code splitting vendor dependencies from application code to leverage browser caching and boost performance; first visit downloads both bundles, then updates occur only when app code or dependencies change.

Learn to implement vendor splitting in Webpack by refactoring the entry to multiple points, creating a separate vendor.js bundle via a vendor_libs array, and analyzing the impact on bundle sizes.

Split your code with CommonsChunkPlugin to separate vendor.js from bundle.js, reducing duplicate dependencies. Boost load speed and caching by keeping vendor.js stable while bundle.js updates frequently.

Identify and resolve missing vendor.js loading after refactoring by using HtmlWebpackPlugin to auto-inject all generated scripts into a template HTML, eliminating manual script tag maintenance.

Learn how chunk hashing powers cache busting for vendor libraries by renaming bundles like bundle.js and vendor.js and using a manifest to signal updates to the browser.

Learn how appending a chunk hash to output filenames enables browser cache busting when bundles change. Vendor and bundle hashes update separately, with html-webpack-plugin updating index.html script tags.

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.

Discover how webpack-dev-server streamlines development by watching files, rebuilding only changed modules, and serving index html automatically for a smoother, server-free workflow.

Install and run the webpack dev server via npm script, view it on localhost:8080, and learn that it serves assets in memory, rebuilds only changed files, and is for development.

Learn to optimize a React app with code splitting via React-router and dynamic imports. Refactor router to a plain object using componentRoutes and getComponent for artist new, detail, and edit.

Learn to implement code splitting in a React Router app using plain route components and System.import to load child modules like ArtistCreate, ArtistDetail, and ArtistEdit on demand.

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.

Prepare a webpack project for production by setting NODE_ENV, using DefinePlugin, and enabling the -p flag to minify output while selecting deployment targets like surge.

Deploy your static Webpack project quickly using surge.sh: run npm run build, deploy the dist directory with surge -p, and optionally add a custom domain.

Deploy to GitHub pages by pushing the dist directory to the gh-pages branch for free, stable hosting, and automate this with a deploy script like npm run deploy.

Deploy your static site to AWS S3 using the s3-website tool, create a deployment bucket, upload the dist directory, and clean up keys and bucket to avoid charges.

Explore deploying apps with a server, comparing separate static assets and api to a monolithic node server that handles assets and api logic, and discuss webpack node integration.

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.

Wire up webpack-dev-middleware with Express to intercept requests, compile assets, and live-reload during development, while maintaining separate production behavior for serving pre-built assets.

Deploy production assets from a disk directory and load webpack middleware only in development, using express.static('dist') and a catch-all route for index.html to support React Router.

Deploy your app to Heroku using a procfile and Git, set up the node server.js, then push to Heroku master and monitor with Heroku open and Heroku logs.

Deploy your app to AWS Elastic Beanstalk using the eb CLI, set the region and credentials, initialize the project, create an environment with a classic load balancer, and deploy.

Open the Elastic Beanstalk deployment with eb open, diagnose a 502 bad gateway by checking the logs, and set NODE_ENV to production to reboot correctly.