Webpack 5: Getting Started 2020

Understand what a JavaScript module is—a file with exportable code that other modules can import and use, enabling encapsulation, modular design, and practical examples with import/export in browsers and MDN.

Learn how to export and import modules in JavaScript using named and default exports, and how to consume them with various import patterns.

Explore modularity by organizing features into independent modules, such as login, vacations, and profile components, enabling separation of concerns, encapsulation, reuse, and maintainable code.

Explore modularity for encapsulation and separation of concerns, and see how splitting large files into small modules—pages and services—improves maintainability, testing, and reuse with Webpack's import/export workflow.

Configure webpack to produce a bundle by setting entry and output properties in a config file, starting from the entry root and generating a bundle linked in the HTML entry.

Explore the output property of webapp configuration, which directs production files to the dist folder and defines the main bundle name, with advanced options to be covered alongside lazy loading.

Create a basic webpack configuration by exporting a config object from webpack.config.js, defining entry as src/index.js and configuring output with a bundle filename and path.

Discover how webpack uses loaders to handle JSON and JavaScript files and why module.rules matters; configure a first rule to load extensions and support multiple file types.

Add a loader to load es6+ javascript using Babel, install Babel core, configure Babel with presets via a .babelrc file, and set up webpack to transpile es6+ code to es5.

Install Babel presets for env and React, install Babel loader, and configure Webpack rules to pass .js and .jsx files to the loader so Babel transpiles to es5.

Install the webpack command line interface, open the terminal, and run webpack from the project root to build with your configuration; inspect the production bundle and modules.

Learn how to use webpack 5 CLI options to build your project, specify entry and config files, and override config from the command line to control output and bundles.

Learn to auto generate the app entry html in Webpack 5 using the Etchingham Elwood Park plugin. Install it, add to Webpack config, and customize title, filename, injection, and favicon/meta.

Run webpack to build and test the app, install the serve package, and serve locally on port 5000, verifying index.html loads a root div and assets.

Learn to load css in webpack by configuring style-loader and css-loader, importing css into your entry, building, and inspecting styles in the browser to fix body margins.

Import png assets into a webpack 5 app, update the webpack config to load image files with a file loader, then build to output the images.

Configure Webpack to use multiple entry files by replacing a single entry with an object of entries, mapping page names to files, and naming bundles with substitutions.

Configure a Webpack loader to control asset naming and output paths. Emit assets to an assets folder using the original file name and extension via loader options.

Configure Webpack's publicPath to point to an external asset host and place images in an assets folder. Upload to an S3 bucket and verify assets load from the external domain.

Configure webpack to use development or production mode by setting the mode property in the config object, and learn how to read mode from arguments or environment variables.

Enable and use source maps in webpack to debug in development mode, inspect original code in the browser's devtools, and map bundles back to your source for easier troubleshooting.