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_