Webpack: Open Source Js

Some websites are very simple to design and function; if you are developing simple front-end website web pack may not be useful for you or using web pack might be more overhead than you need.
Webpack is a module bundler. But why should one really use Webpack?
If you’re building a complex Front End application with many non-code static assets such as CSS, images, fonts, etc, then yes, Webpack will give you great benefits.
For large projects, Webpack isn’t worth using without the dev server.

When you bundle a project using webpack, it traverses the imports, constructing a dependency graph of the project and then generates an output based on the configuration.

Webpack is a build tool that puts all of your assets, including Javascript, images, fonts, and CSS, in a dependency graph. Webpack lets you use require() in your source code to point to local files, like images.

why bundles?

The browser doesn’t support require(), so a build tool transform the files into a “bundled” file that the browser can execute properly. Webpack can also write static assets to disk. It can copy files from your source directory and put them in a temporary output directory.

Why Webpacks?

Before Webpack Javascript dependencies were managed by including files in a specific order:

<script src="jquery.min.js"></script>
<script src="jquery.some.plugin.js"></script>
<script src="main.js"></script>

This was too slow because of excess HTTP requests. So webpack concat and minify scripts in a build step:

// build-script.js
var scripts = [

// Everything our app needs!
<script src="bundle.js"></script>


Webpack lets you use require() on non-Javascript files too.

<img src={ require('../../assets/logo.png') } />

The file loader also spits out logo.png into some local folder you specify, like dist/. Now you simply upload the contents of dist/ to your CDN, deploy your new code, and the image is guaranteed to load on your site.
The source code never actually gets executed in the browser (nor in Node.js). Webpack builds a new Javascript file, replacing require()calls with valid Javascript code, such as URLs. The bundled file is what’s executed by Node or the browser.


Static assets in a dependency graph offer many benefits. Here are a few:

  • Dead asset elimination. You only build the images and CSS into your dist/ folder that your application actually needs.
  • Easier code splitting. For example, because you know that your file Homepage.js only requires specific CSS files, Webpack could easily build a homepage.css file to greatly reduce initial file size.
  • Webpack will slow you down at the start, but give you great speed benefits when used correctly. You get hot page reloading. True CSS management. CDN cache busting because Webpack automatically changes file names to hashes of the file contents, etc.

Webpack is the main build tool adopted by the React community. This makes finding help easier, and understanding Webpack more valuable. Learn using webpack with react.


  • The documentation is awful. But this con cannot stop you from learning web pack. so, the web pack community has released this book for beginners.
  • The source code is similarly painful.
  • Configuring Webpack is a minefield for newcomers. The configuration file syntax is confusing.
  • Webpack is maintained mostly by one person. The rapid community adoption and the thrust into the spotlight mean the ecosystem lags far behind the maturity of React. This has side effects, such as the poor quality of the documentation.

[amazon_link asins=’B06XWZZGBS,B00YSILWF2,B01GLC0Z5K,B06XXC9L1L,1617293342|9526868803,1617293342,B0799Z817K,152391050X|B06XWZZGBS,B07CQLGGP9,1492037656,B00YSILWF2|9526868803,152391050X,B07CQLGGP9,1783980729,B01GLC0Z5K’ template=’ProductCarousel’ store=’lifenews525-21|lifenews-21|lifenews06-21|lifenews0b-21′ marketplace=’IN|UK|FR|IT’ link_id=’ bed9ee4f-d6b8-11e8-af9a-bb449b357fe3′]

0 0 vote
Article Rating
Notify of
Newest Most Voted
Inline Feedbacks
View all comments

[…] Webpack Sources, one of the core packages of Webpack, and its dependencies source-list-map and source-map are re-written in Rust and compiled to WebAssembly binary to speed up the webpack bundling time. […]


[…] Webpack Sources, one of the core packages of Webpack, and its dependencies source-list-map and source-map are re-written in Rust and compiled to WebAssembly binary to speed up the webpack bundling time. […]


Enjoy this blog? Please spread the word :)