Webpack 5: Getting Started 2020

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.

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.

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 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.