Webpack recipes
A collection of webpack configurations
Basics
Bundle javascript
CSS
CSS
Bundle & inject CSS
PostCSS
Bundle & inject PostCSS processed CSS
Sass with PostCSS
Bundle & inject Sass preprocessed CSS and use PostCSS to post-process
JavaScript
ES2015+ (Babel) > JavaScript
Bundle ES2015+ Javascript with Babel transpiler
Typescript > JavaScript (coming soon)
HTML
Simple HTML
Simplify creation of HTML files to serve your webpack bundles
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.
Assets
Images (coming soon)
SVGs (coming soon)
Fonts (coming soon)
Icons (coming soon)
Testing
Jest (coming soon)
Formatting
ESLint
Lint your code with ESLint
Standard
Lint your code with standard
Prettier
Run the Prettier code formatter on build/watch
A11y (coming soon)
Advanced
Optimisation
Code splitting - Commons Chunks
Split all
node_modules
vendor code into separate file
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
⚡