All You Need to Know about Webpack in Examples

This article will cover all main ideas behind the webpack — module bundler. You will know how to configure webpack, add assets, add css files, bundle your js file, starting a server, prod and dev build and more…

What topics this article covers:

• 1. Simplest project and Webpack installation;
• 2. Configuration file;
• 3. Regenerate bundle on file save;
• 4. Using webpack-dev-server;
• 5. Multiple files in the bundle;
• 6. Using Loaders
• 7. Production vs. Development builds
• 8. Adding HTML file into the build
• 9. Adding CSS into the build
• 9.1 Adding CSS to J.S. bundle
• 9.2 Adding CSS as a separate bundle
• 10. Adding assets to the build

1. Simplest project and Webpack installation

I think you probably know how to start a npm project with dependencies, but still, if you don't, no worries, just run those commands inside your project's folder, and after that, you are ready to go 😉

npm init
npm install webpack webpack-cli --save-dev