When comparing Yarn vs Webpack, the Slant community recommends Webpack for most people. In the question“What are the best Node.js build systems / task runners?” Webpack is ranked 2nd while Yarn is ranked 4th. The most important reason people chose Webpack is:
Plugins and loaders are easy to write and allow you to control each step of the build, from loading and compiling CoffeeScript, LESS and JADE files to smart post processing and asset manifest building.
Ranked in these QuestionsQuestion Ranking
Pros
Pro The same results will be yielded every time yarn is run in a repository
One of the most important aspects of Yarn is determinism (predictability). The lock file ensures that the same dependencies will always be installed in the same way and order regardless of the machine for a given repository.
Pro Can tell you why a package was installed
yarn why <query>
can tell you why a package was installed and what other packages depend on it.
Pro Good network performance
Yarn efficiently queues up requests and avoids request waterfalls in order to maximize network utilization.
Pro Offline mode
If you've installed a package before, you can install it again without any internet connection.
Pro Flat Mode
Resolve mismatching versions of dependencies to a single version to avoid creating duplicates.
Pro Multiple registries
Install any package from either npm or Bower and keep your package workflow the same.
Pro Network resilience
A single request failing won't cause an install to fail. Requests are retried upon failure.
Pro Good documentation
It looks like it has good documentation.
Pro Security is put at the forefront
Even though it's still in its early stages of development, security is one of the core values on which Yarn is built. It uses checksums to verify the integrity of every package before executing its code. This also helps avoiding errors related to faulty caching or captive portals.
Further steps are also being taken to improve the security of Yarn which will be implemented in the future.
Pro Built by the community for the community
Even though it's backed by Facebook, Yarn is built as a community project first and foremost. It's completely open source and hosted on Github. It's released under a standard open source client and has its own GitHub organization and set up to work under the same governance model that other successful projects have used in the past, such as Rust and Ember.
All of this means that both existing and new contributors will always work together to improve the product and introduce new features while also keeping in mind suggestions coming from the community.
Pro Backed by Facebook and Google
Was created in a collaboration of Facebook with Exponent, Google and Tilde.
Pro Rich and flexible plugin infrastructure
Plugins and loaders are easy to write and allow you to control each step of the build, from loading and compiling CoffeeScript, LESS and JADE files to smart post processing and asset manifest building.
Pro Tap into npm's huge module ecosystem
Using Webpack opens you up to npm, that has over 80k modules of which a great amount work both client-side and server-side. And the list is growing rapidly.
Pro Can create a single bundle or multiple chunks loaded on demand, to reduce initial loading time
Webpack allows you to split your codebase into multiple chunks. Chunks are loaded on demand. This reduces the initial loading time.
Pro Supports source maps for easier debugging
Source maps allow for easier debugging, because they allow you to find the problems within the origin files instead of the output file.
Pro ES6 module support
Webpack supports ES6 modules and their import
and export
methods without having to compile them to CommonJS require
Pro Share the same modules client-side and server-side
Because Webpack allows you to use the same require() function as node.js, you can easily share modules between the client-side and server-side.
Pro Bundles CommonJs and AMD modules (even combined)
Webpack supports AMD and CommonJS module styles. It performs clever static analysis on the AST of your code. It even has an evaluation engine to evaluate simple expressions. This allows you to support most existing libraries.
Pro Mix ES6 AMD and CommonJS
Webpack supports using all three module types, even in the same file.
Pro Limit plugin integration issues
Cons
Con Takes up disk space
Yarn adds to your disk space usage since it stores dependencies locally.
Con Config file may be hard to understand
Due to a somewhat hard to grasp syntax, configuring Webpack may take some time.