Webpack
Webpack is a module bundler for JavaScript applications. It starts from an entry point (e.g. src/index.js), traces all import/require statements to build a dependency graph, processes each file type through loaders, applies plugins, and outputs one or more optimised bundles for the browser.
Usage in burgerApp
The burgerApp uses Webpack 3.8.1 via an ejected Create React App configuration (config/webpack.config.dev.js and config/webpack.config.prod.js). Key loaders configured:
| Loader | Handles |
|---|---|
babel-loader | JSX + ES6+ → ES5 via Babel |
css-loader | CSS import statements in JS |
style-loader | Injects CSS into <style> tags at runtime (dev) |
extract-text-webpack-plugin | Extracts CSS to separate .css files (prod) |
url-loader / file-loader | Images and fonts |
Webpack vs the Natours Build
The Natours project (final-after-S06) does not use Webpack — its CSS pipeline is driven by node-sass, concat, postcss-cli, and npm-run-all scripts. This reflects the different tooling ecosystems:
- React apps → Webpack (or Vite in modern projects)
- Plain HTML/CSS projects → direct CLI tools or task runners
See Also
- react — the framework whose build this powers
- single-page-application — the output architecture
- schwarzmuller-2021-react-burger-app — source repo