Webpack recipes

A collection of webpack configurations

Basics

Bundle javascript

• readme
• webpack.config

---

CSS

CSS

Bundle & inject CSS

• readme
• webpack.config

PostCSS

Bundle & inject PostCSS processed CSS

• readme
• webpack.config

Sass with PostCSS

Bundle & inject Sass preprocessed CSS and use PostCSS to post-process

• readme
• webpack.config

---

JavaScript

ES2015+ (Babel) > JavaScript

Bundle ES2015+ Javascript with Babel transpiler

• readme
• webpack.config

Typescript > JavaScript (coming soon)

---

HTML

Simple HTML

Simplify creation of HTML files to serve your webpack bundles

• readme
• webpack.config

Complex HTML (coming soon)

More complex version of previous example

---

Webpack Dev Server

Simple Webpack Dev Server

Setup a simple webpack-dev-server example, that provides you with a server and live reloading.

• readme
• webpack.config

---

Assets

Images (coming soon)

SVGs (coming soon)

Fonts (coming soon)

Icons (coming soon)

---

Testing

Jest (coming soon)

Formatting

ESLint

Lint your code with ESLint

• readme
• webpack.config

Standard

Lint your code with standard

• readme
• webpack.config

Prettier

Run the Prettier code formatter on build/watch

• readme
• webpack.config

A11y (coming soon)

---

Advanced

Optimisation

Code splitting - Commons Chunks

Split all node_modules vendor code into separate file

• readme
• webpack.config

Progressive Web Apps (coming soon)

---

Useful plugins

• Case Sensitive Paths - Enforces case sensitive paths in Webpack requires. Extremely useful for larger teams and continuous integration setups work without issues.
• npm Install Webpack Plugin - Speed up development by automatically installing & saving dependencies with Webpack.

---

How can you help?

Contributions and corrections are actively encouraged. I want this resource to be as useful as possible.

---

Made by ZΛNDΞR ⚡