Setup Web project using webpack - 2021

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_