Webpack 4 - First Steps

Learn how webpack uses a configuration file to unlock features beyond zero-configuration mode. Export a config object from a specially named file so webpack can load it.

Choose a webpack mode to tailor builds for development or production, producing verbose outputs for debugging in development and compressed, optimized code for production.

Set the entry point in Webpack config; by default it uses src/index.js. Webpack resolves imports into a dependency tree and outputs a bundle, with multiple entries via arrays or objects.

Learn to customize webpack's output with output.filename and output.path, controlling the build file name and its directory, including placing builds in a dedicated build or dist folder.

Learn how to configure webpack output by using the path package to set an absolute build folder, replacing the default distribution path and enabling npm run build to create folder.

Explore available placeholders in webpack: hash, chunk hash, named placeholder, id placeholder, query placeholder, and content hash, and learn how content hashes enable cache busting for production builds.

Explore how Webpack's publicPath resolves asset URLs during code splitting, guiding where to load files from (like assets on a server) and how the first bundle references others.

Explore webpack's library target, configure the library name, and output format to support commonjs, amd, or umd, with the library exposed on the global window.

Replace slow file-based testing with the webpack dev server, install npm install webpack-dev-server, configure content base and map assets to /assets, and enable automatic reloads with hot module reloading.

Explore how Webpack devServer compiles changes in memory by default, and how to enable writing assets to disk with writeToDisk for debugging when running npm run dev.

Learn how to enable hot reloading in a webpack 4 project using the built-in hot module replacement, configure the plugin, and handle module.hot.accept to update assets without full page reloads.

Explore how plugins extend webpack beyond a module bundler, enabling hot module replacement and dynamic file generation, removing dead trees before builds, while hooks empower plugin developers to compose tools.

Learn to install and configure the HDMI back plugin in webpack 4 to generate an index file dynamically, set a title and template, and enable write-to-disk options.

Learn how loaders extend webpack beyond JavaScript by transforming non-js files into JavaScript, enabling parsing of different file types and transpiling experimental syntax or React features, including stage proposals.

Discover how to implement a loader in webpack using a csx loader and a style loader, configure module rules, test files with a regex, and inject styles into the document.

Set up a fresh webpack 4 project from scratch and build a real-world about me website, using loaders, plugins, and configurations.

Set up project dependencies for a react-based webpack workflow by installing babel loader, environment and react presets, typescript loaders, SAS loaders, and React and React DOM.

Configure Webpack 4 loaders for tsx/ts with awesome-typescript-loader and babel, and enable SAS loader with style-loader; allow CSX loader for node_modules, excluding others.

Learn how to set up tsconfig.json for a webpack 4 TypeScript project, including target es2017, decorators, and import styles like default versus import star.

Build a hello world React app with a custom webpack 4 configuration, using tsx and typescript, render via react-dom, and apply sass styles with loaders.

Learn to build a simple calculator in a React TypeScript project, featuring a display and button panel, calculator logic, and big numbers handling with a library.

Set up hot module replacement with Webpack 4 for a React project, configure the dev server, install types, and see how HMR updates modules quickly to speed up development.

Define webpack aliases to map logical paths like logic and components to real directories, update the resolve.alias and loader configuration, and enable clean, path-agnostic imports across the project.

Create a production build with webpack 4 by configuring a production setup, switching mode to production, and using mini-css-extract-plugin to emit separate CSS files instead of inline styles.

Congratulations on completing webpack 4 — first steps; continue building projects with webpack, explore code splitting, and learn about images, fonts, and asset plugins by doing.