# Webpack

## What is Webpack

Quotes from [SuiviveJS](https://survivejs.com/webpack/what-is-webpack/):

> Webpack is a module bundler. Webpack can take care of bundling alongside a separate task runner. However, the line between bundler and task runner has become blurred thanks to community developed webpack plugins. Sometimes these plugins are used to perform tasks that are usually done outside of webpack, such as cleaning the build directory or deploying the build.

## Configure your React project with React from scratch

The `create-react-app` comes with pre-configured Webpack so usually you don't need to know the details how it actually works.

If you would like to configure a React project with Webpack from scratch, you can checkout the tutorials below:

* [How to Create a React app from scratch using Webpack 4](https://medium.freecodecamp.org/part-1-react-app-from-scratch-using-webpack-4-562b1d231e75)
* [React + Webpack 4 + Babel 7 Setup Tutorial](https://www.robinwieruch.de/minimal-react-webpack-babel-setup/)
* [Learn Webpack for React](https://esausilva.com/2018/01/13/learn-webpack-for-react/)
* [Working with Babel 7 and Webpack](https://www.thebasement.be/working-with-babel-7-and-webpack/)

## Other Bundling Tools

Besides Webpack, there are many other so called bunlders, you can find some comparison [here](https://survivejs.com/webpack/appendices/comparison/#bundlers)

## References

* [Webpack: from apprentice to master](https://survivejs.com/webpack/)
* [An Annotated webpack 4 Config for Frontend Web Development](https://nystudio107.com/blog/an-annotated-webpack-4-config-for-frontend-web-development)

