https://github.com/mrmartineau/webpack-recipes

🆘 A collection of webpack configurations
https://github.com/mrmartineau/webpack-recipes

bundle-javascript javascript webpack webpack-configuration webpack-recipes

Last synced: about 2 months ago
JSON representation

🆘 A collection of webpack configurations

• Host: GitHub
• URL: https://github.com/mrmartineau/webpack-recipes
• Owner: mrmartineau
• Created: 2017-07-02T21:21:37.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-09-05T09:17:08.000Z (over 7 years ago)
• Last Synced: 2024-10-12T02:42:55.032Z (2 months ago)
• Topics: bundle-javascript, javascript, webpack, webpack-configuration, webpack-recipes
• Language: JavaScript
• Homepage:
• Size: 205 KB
• Stars: 47
• Watchers: 4
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        


  Webpack recipes


  [![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

  ![](https://img.shields.io/badge/licence-MIT-blue.svg?style=flat-square)

  [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)



> A collection of webpack configurations

## [Basics](basic)

> Bundle javascript

* [readme](basic/#readme)

* [webpack.config](basic/webpack.config.babel.js)

---

## [CSS](css)

### [CSS](css/css)

> Bundle & inject CSS

* [readme](css/css/#readme)

* [webpack.config](css/css/webpack.config.babel.js)

### [PostCSS](css/postcss)

> Bundle & inject [PostCSS](http://postcss.org/) processed CSS

* [readme](css/postcss/#readme)

* [webpack.config](css/postcss/webpack.config.babel.js)

### [Sass](css/sass) with PostCSS

> Bundle & inject Sass preprocessed CSS and use [PostCSS](http://postcss.org/) to post-process

* [readme](css/sass/#readme)

* [webpack.config](css/sass/webpack.config.babel.js)

---

## [JavaScript](javascript)

### [ES2015+ (Babel) > JavaScript](javascript/babel)

> Bundle ES2015+ Javascript with Babel transpiler

* [readme](javascript/babel/#readme)

* [webpack.config](javascript/babel/webpack.config.babel.js)

### Typescript > JavaScript (coming soon)

---

## HTML

### [Simple HTML](html/simple)

> Simplify creation of HTML files to serve your webpack bundles

* [readme](html/simple/#readme)

* [webpack.config](html/simple/webpack.config.babel.js)

### Complex HTML (coming soon)

> More complex version of previous example

---

## Webpack Dev Server

### [Simple Webpack Dev Server](devserver/simple)

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

* [readme](devserver/simple/#readme)

* [webpack.config](devserver/simple/webpack.config.babel.js)

---

## Assets

### Images (coming soon)

### SVGs (coming soon)

### Fonts (coming soon)

### Icons (coming soon)

---

## Testing

### Jest (coming soon)

## Formatting

### [ESLint](formatting/eslint)

> Lint your code with [ESLint](http://eslint.org/)

* [readme](formatting/eslint/#readme)

* [webpack.config](formatting/eslint/webpack.config.babel.js)

### [Standard](formatting/standard)

> Lint your code with [standard](https://standardjs.com/)

* [readme](formatting/standard/#readme)

* [webpack.config](formatting/standard/webpack.config.babel.js)

### [Prettier](formatting/prettier)

> Run the [Prettier](https://github.com/prettier/prettier) code formatter on build/watch

* [readme](formatting/prettier/#readme)

* [webpack.config](formatting/prettier/webpack.config.babel.js)

### A11y (coming soon)

---

## Advanced

### Optimisation

#### [Code splitting - Commons Chunks](optimisation/common-chunks)

> Split all `node_modules` vendor code into separate file

* [readme](optimisation/common-chunks/#readme)

* [webpack.config](optimisation/common-chunks/webpack.config.babel.js)

### Progressive Web Apps (coming soon)

---

## Useful plugins

* [Case Sensitive Paths](https://github.com/Urthen/case-sensitive-paths-webpack-plugin#case-sensitive-paths---webpack-plugin) - Enforces case sensitive paths in Webpack requires. Extremely useful for larger teams and continuous integration setups work without issues.

* [npm Install Webpack Plugin](https://github.com/webpack-contrib/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 :zap:](https://github.com/mrmartineau/)