is a flexible bundler that provide you with tons of options and configuration so you can personalize your JavaScript projects, but with great power comes a great mess... err, I mean, great responsibility when configuring. webpack In this article I assume you know what is, if not please check their . Also the code portrayed is run in Linux, but everything works similar in other GNU/Linux distros or Mac, to use in Windows you have to make some little configurations, mostly just install a good terminal and . If you found some error don't hesitate to comment or communicate with me. Well, let's go! webpack great documentation npm Use cases for webpack Webpack is used primarily to mix and match javascript code. You have code organized in several folders with some (or lot) of external packages, and you want this code to not block the webpage when a user request the page. Using you can organize your code better by specify entry-points, ouput and which and when to load what. When you have a large (or growing) code-base, this order is crucial. Here we must also remember the and . So we use webpack not only to organize for also to compress/minify code in order to decrease loading time and improve user experience. This way users are happy, the company have more views and interaction, and you can boast about your (webpack's) optimization skills. But a webpage is not only javascript, but HTML, CSS and assets as fonts, images and icons. helps you to organize all of them using . The idea behind plugins is that you use only the functionalities you need. Also you can choose what will happen to each thing, for example if you want to use a or if you want to use . While there is no official word about when or how much use webpack, there is some points to consider: webpack DOM event flow how javascript code can affect user experience when requesting your webpage webpack plugins CSS preprocessor chunks for code split If your webpage is not so complex, for example a single page with some CSS and little to none js, maybe adding webpack is too much. If your webpage need too much data/state to render things, for example a blog or a complex webapp, maybe its better to use more scalable options like Server Side Rendering, CMS/CRM platforms, etc., instead of trying to make a big and complex webpack configuration/project. if you will not use a plugin too much maybe you must consider other alternatives, for example if your website have a few style rules maybe instead of setup a plugin for a preprocessor you can use a normal CSS file. if you are using a lot of assets or assets are too heavy, maybe using a CDN or services like or its a better idea than a plugin. cloudinary Unsplash If you don't have enought experience with webpack you can . search for an already made configuration template webpack Now we will consider some cases for setup webpack. JS only webpack setup in this setup you won't care about HTML or CSS or assets, just in making one or more JS modules to compile. First step is to create a folder, then inside we initialize : npm npm init -y npm i -D webpack webpack-cli If you will only need one output JS file the only remaining thing to make is a folder called and inside a file called . Inside of this file you can put you code, call other files and import CSS. Now please open your file called and in the section called "scripts" like this: src/ index.js package.json : { : , : }, "scripts" "test" "echo \"Error: no test specified\" && exit 1" "start" "webpack" All that code will be output into a new file inside folder just using this command: dist/ npm start You'll notice the new folder and a file called will be produced. This file have already minified and uglyfy code, ready for copy/paste in your HTML! main.js I prepared a GitHub repository so you can check how the code looks like. here
