webpack is the most popular bundler and tooling option out there with lot of great plugins and loaders in it's ecosystem. It is backs other tooling as well like create-react-app . Thus, we can say in current scenario webpack has become backbone of web development (for big projects at least!).

As of 2021, there are a lot of not-bundlers out there like esbuild , Vite, etc but with better community support and being a more production tested solution as compared to them, webpack should be considered a safer approach for productions. Comparisons with other bundlers can be found at https://bundlers.tooling.report/

All that said, setting up webpack configurations has been a headache for many especially the beginners. With new improvements in webpack-cli's generator support, we can kickstart new projects fairly quickly!

Steps!

Follow these simple steps!

mkdir my-project
cd my-project
npm init -y
npm install --save-dev webpack webpack-cli @webpack-cli/generators
npx webpack init

After running all these, you would encounter a questionaire, just select answers as per requirements (or just press enter if not sure). And you have your we

Run your project!

Try running npm run build and you would see a dist folder with bundled project!

If you have opted for webpack-dev-server in questionaire, then run npm run serve and see Hello World! output on your browser!

Thanks for reading! If you have any feedbacks / doubts, feel free to leave on comments below! or ask me on twitter @rishabh3112_