Advertisements

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:

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

Require()

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

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.

Pros

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.

Con

  • 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.

How useful was this post?

Do not forget to rate! this helps us to Improve.

Average rating / 5. Vote count:

Read More Like This..

Follow us on social media!

We are sorry that this post was not useful for you!

Let us improve this post!

Advertisements

Safiya Akhtar

Safiya Akhtar is Android Application Developer in India. She is currently working as a public consultant for career and education too, besides blogging and freelancing. She believes that it is never too late or too early to start what you have always dreamed of.

2 thoughts on “Webpack: Open Source Js

Your Views And Question are Welcome Here!

Advertisements