Ykit: A Webpack‑Based Build Tool for Faster, Consistent Frontend Development at Qunar

As JavaScript applications become increasingly diverse and complex, setting up a basic development environment in a large company can take half a day, hindering productivity; the article presents Ykit, a Webpack‑based build tool designed to let developers focus on core development work.

Webpack is one of the most popular frontend build tools, offering high configurability for frameworks such as React, Angular, and Vue, but its flexibility often results in overly complex configuration files that are unfriendly to newcomers.

Before Ykit, Qunar’s teams used a mix of tools (Gulp, Grunt, Webpack) leading to duplicated scripts for tasks like resource paths, versioning, HMR, and mock services, a lack of build‑level optimizations (e.g., extracting common code with CommonChunks), and high communication and learning costs across projects.

Ykit wraps Webpack with a plugin mechanism; by installing the appropriate plugin developers can instantly obtain a ready‑to‑use environment for React, Ant Design, WeChat mini‑programs, mobile landing pages, and more, while encapsulating common build steps such as version file generation.

To speed up builds, Ykit performs entry filtering so that only the resources requested by a page are bundled, and it replaces the built‑in UglifyJS with multi‑process compression, avoiding memory overflow in large projects; additional plugins like Happypack and DLLPlugin further reduce first‑build times from tens of seconds to a few seconds.

Currently more than 80 projects across Qunar’s business lines use Ykit, and the tool is open‑source on GitHub (YMFE/ykit); future plans include expanding scenarios such as additional mini‑program scaffolds to make environment setup even simpler and keep developers focused on product development.