Vite vs Webpack: Modern vs Traditional Build Tools

Vite and Webpack are both popular tools that help prepare your JavaScript code for the web. They take your code, along with its dependencies, and bundle them together so browsers can understand them. While Webpack has been the go-to tool for many years, Vite is a newer, faster alternative that's gaining popularity because it starts up quicker and makes development feel more smooth.

Build Toolsbundlerdevelopment-toolsperformancejavascriptbuild-optimization

Detailed Comparison

Technical Analysis

featureComparison

Vite is a modern development server that focuses on speed and simplicity, while Webpack is a full-fledged bundler that offers more advanced features like code splitting and tree shaking. Vite uses ESbuild under the hood, which provides faster build times, whereas Webpack uses its own compiler.

typescriptSupport

Both Vite and Webpack support TypeScript out of the box. However, Webpack requires additional configuration, whereas Vite can automatically detect and compile TypeScript files.

browserCompatibility

Both Vite and Webpack support modern browsers, including Chrome, Firefox, and Edge. However, Webpack has better support for older browsers like Internet Explorer.

dependencies

Vite has fewer dependencies (around 30) compared to Webpack (around 100), making it a more lightweight option.

performance

Vite is generally faster than Webpack due to its use of ESbuild and its focus on development server performance.

Ecosystem Analysis

frameworkCompatibility

Both Vite and Webpack are compatible with popular frameworks like React, Angular, and Vue.js. However, Vite has better support for Vue.js due to its origins as a Vue.js-specific tool.

communityActivity

Webpack has a larger and more established community, with more contributors and maintainers. Vite, on the other hand, has a smaller but still active community.

documentationQuality

Both Vite and Webpack have high-quality documentation, with clear guides and examples. However, Webpack's documentation is more comprehensive due to its larger feature set.

maintenanceStatus

Both Vite and Webpack are actively maintained, with regular updates and releases.

Performance Comparison

bundleSizeAnalysis

Vite's bundle size is generally smaller than Webpack's due to its use of ESbuild and its focus on development server performance.

runtimePerformance

Vite is faster than Webpack during development due to its use of ESbuild and its caching mechanisms.

loadingTime

Vite's loading time is generally faster than Webpack's due to its use of caching and its focus on development server performance.

memoryUsage

Vite uses less memory than Webpack due to its more efficient caching mechanisms.

Code Examples

Vite Example

1import { createServer } from 'vite';
2
3createServer({
4  root: './src',
5  port: 3000
6}).listen();

This example creates a Vite development server that serves files from the `src` directory on port 3000.

Webpack Example

1const webpack = require('webpack');
2
3module.exports = {
4  entry: './src/index.js',
5  output: {
6    path: './dist',
7    filename: 'bundle.js'
8  }
9};

This example creates a basic Webpack configuration that takes the `index.js` file from the `src` directory and outputs a bundled file called `bundle.js` in the `dist` directory.

Recommendation

Summary

Vite is a great choice for smaller to medium-sized projects that require fast development and simple configuration, while Webpack is better suited for larger, more complex projects that require advanced features and customization.

Details

Vite is ideal for projects that prioritize speed and simplicity
Webpack is better for projects that require advanced features like code splitting and tree shaking

Similar Packages

Parcel

90%

A zero-configuration build tool that automatically handles your dependencies and builds your app. It's super fast and doesn't need any setup files like webpack.config.js.

Perfect for beginners because it works out of the box without any configuration. It's faster than webpack for small to medium projects and supports the same features like hot reloading and code splitting.

Build Tool

Snowpack

90%

A modern, lightweight build tool that leverages JavaScript's native module system. It's similar to Vite in its development approach and speed.

Good alternative to Vite with similar modern features. It was one of the first tools to use the unbundled development approach that made dev servers super fast.

Build Tool

Rollup

80%

A module bundler that's great for creating libraries and small applications. It creates smaller bundle sizes by removing unused code and is simpler to understand than webpack.

Good alternative when you're building a library or want smaller bundle sizes. It's like webpack but more straightforward and focused on ES modules.

Build Tool

esbuild

70%

An extremely fast JavaScript bundler written in Go. It can bundle your code up to 100x faster than webpack and has simple configuration options.

Perfect when build speed is your top priority. It's similar to Vite (which uses esbuild internally) but more basic and focused just on bundling.

Build Tool

WMR

60%

A tiny all-in-one development tool from the Preact team. It bundles your code, provides a dev server, and handles production builds with zero config.

Great for small to medium projects, especially if you're using Preact. It's like a lighter version of Vite with similar modern features.

Build Tool

vite ⚡

Next Generation Frontend Tooling

💡 Instant Server Start
⚡️ Lightning Fast HMR
🛠️ Rich Features
📦 Optimized Build
🔩 Universal Plugin Interface
🔑 Fully Typed APIs

Vite (French word for "fast", pronounced /vit/) is a new breed of frontend build tool that significantly improves the frontend development experience. It consists of two major parts:

A dev server that serves your source files over native ES modules, with rich built-in features and astonishingly fast Hot Module Replacement (HMR).
A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.

In addition, Vite is highly extensible via its Plugin API and JavaScript API with full typing support.

Read the Docs to Learn More.

[![npm][npm]][npm-url]

[![node][node]][node-url] [![builds1][builds1]][builds1-url] [![builds2][builds2]][builds2-url] [![dependency-review][dependency-review]][dependency-review-url] [![coverage][cover]][cover-url] [![PR's welcome][prs]][prs-url]

<h1>webpack</h1> <p> Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset. </p> </div>

Install
Introduction
Concepts
Contributing
Support
Current project members
- TSC (Technical Steering Committee)
- Core Collaborators
Sponsoring
Special Thanks

<h2>Install</h2>

Install with npm:

npm install --save-dev webpack

Install with yarn:

yarn add webpack --dev

<h2>Introduction</h2>

Webpack is a bundler for modules. The main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

TL;DR

Bundles ES Modules, CommonJS, and AMD modules (even combined).
Can create a single bundle or multiple chunks that are asynchronously loaded at runtime (to reduce initial loading time).
Dependencies are resolved during compilation, reducing the runtime size.
Loaders can preprocess files while compiling, e.g. TypeScript to JavaScript, Handlebars strings to compiled functions, images to Base64, etc.
Highly modular plugin system to do whatever else your application requires.

Learn about webpack through videos!

Get Started

Check out webpack's quick Get Started guide and the other guides.

Browser Compatibility

Webpack supports all browsers that are ES5-compliant (IE8 and below are not supported). Webpack also needs Promise for import() and require.ensure(). If you want to support older browsers, you will need to load a polyfill before using these expressions.

<h2>Concepts</h2>

Plugins

Webpack has a rich plugin interface. Most of the features within webpack itself use this plugin interface. This makes webpack very flexible.

Loaders

Webpack enables the use of loaders to preprocess files. This allows you to bundle any static resource way beyond JavaScript. You can easily write your own loaders using Node.js.

Loaders are activated by using loadername! prefixes in require() statements, or are automatically applied via regex from your webpack configuration.

Files

JSON

Transpiling

| Name | Status | Install Size | Description | | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------: | :------------: | :------------------------------------------------------------------------------------------------ | | <a href="https://github.com/babel/babel-loader"><img width="48" height="48" title="babel-loader" src="https://worldvectorlogo.com/logos/babel-10.svg"></a> | | | Loads ES2015+ code and transpiles to ES5 using <a href="https://github.com/babel/babel">Babel</a> | | <a href="https://github.com/TypeStrong/ts-loader"><img width="48" height="48" src="https://raw.githubusercontent.com/microsoft/TypeScript-Website/f407e1ae19e5e990d9901ac8064a32a8cc60edf0/packages/typescriptlang-org/static/branding/ts-logo-128.svg"></a> | | | Loads TypeScript like JavaScript | | <a href="https://github.com/webpack-contrib/coffee-loader"><img width="48" height="48" src="https://worldvectorlogo.com/logos/coffeescript.svg"></a> | | | Loads CoffeeScript like JavaScript |

Templating

| Name | Status | Install Size | Description | | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------: | :--------------: | :-------------------------------------------------------------------------------------- | | <a href="https://github.com/webpack-contrib/html-loader"><img width="48" height="48" src="https://worldvectorlogo.com/logos/html5-2.svg"></a> | | | Exports HTML as string, requires references to static resources | | <a href="https://github.com/pugjs/pug-loader"><img width="48" height="48" src="https://cdn.rawgit.com/pugjs/pug-logo/master/SVG/pug-final-logo-_-colour-128.svg"></a> | | | Loads Pug templates and returns a function | | <a href="https://github.com/webdiscus/pug-loader"><img width="48" height="48" src="https://cdn.rawgit.com/pugjs/pug-logo/master/SVG/pug-final-logo-_-colour-128.svg"></a> | | | Compiles Pug to a function or HTML string, useful for use with Vue, React, Angular | | <a href="https://github.com/peerigon/markdown-loader"><img width="48" height="48" src="https://worldvectorlogo.com/logos/markdown.svg"></a> | | | Compiles Markdown to HTML | | <a href="https://github.com/posthtml/posthtml-loader"><img width="48" height="48" src="https://posthtml.github.io/posthtml/logo.svg"></a> | | | Loads and transforms a HTML file using PostHTML | | <a href="https://github.com/pcardune/handlebars-loader"><img width="48" height="48" src="https://worldvectorlogo.com/logos/handlebars-1.svg"></a> | | | Compiles Handlebars to HTML |

Styling

| Name | Status | Install Size | Description | | :-------------------------------------------------------------------------------------------------------------------------------------------: | :------------: | :-------------: | :----------------------------------------------------------------------- | | <a href="https://github.com/webpack-contrib/style-loader"><style></a> | | | Add exports of a module as style to DOM | | <a href="https://github.com/webpack-contrib/css-loader"><img width="48" height="48" src="https://worldvectorlogo.com/logos/css-3.svg"></a> | | | Loads CSS file with resolved imports and returns CSS code | | <a href="https://github.com/webpack-contrib/less-loader"><img width="48" height="48" src="https://worldvectorlogo.com/logos/less-63.svg"></a> | | | Loads and compiles a LESS file | | <a href="https://github.com/webpack-contrib/sass-loader"><img width="48" height="48" src="https://worldvectorlogo.com/logos/sass-1.svg"></a> | | | Loads and compiles a Sass/SCSS file | | <a href="https://github.com/shama/stylus-loader"><img width="48" height="48" src="https://worldvectorlogo.com/logos/stylus.svg"></a> | | | Loads and compiles a Stylus file | | <a href="https://github.com/postcss/postcss-loader"><img width="48" height="48" src="https://worldvectorlogo.com/logos/postcss.svg"></a> | | | Loads and transforms a CSS/SSS file using PostCSS |

Frameworks

| Name | Status | Install Size | Description | | :----------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------: | :-------------: | :----------------------------------------------------------------------------------------------------- | | <a href="https://github.com/vuejs/vue-loader"><img width="48" height="48" src="https://worldvectorlogo.com/logos/vue-9.svg"></a> | | | Loads and compiles Vue Components | | <a href="https://github.com/webpack-contrib/polymer-webpack-loader"><img width="48" height="48" src="https://worldvectorlogo.com/logos/polymer.svg"></a> | | | Process HTML & CSS with preprocessor of choice and require() Web Components like first-class modules | | <a href="https://github.com/TheLarkInn/angular2-template-loader"><img width="48" height="48" src="https://worldvectorlogo.com/logos/angular-icon-1.svg"></a> | | | Loads and compiles Angular 2 Components | | <a href="https://github.com/riot/webpack-loader"><img width="48" height="48" src="https://worldvectorlogo.com/logos/riot.svg"></a> | | | Riot official webpack loader | | <a href="https://github.com/sveltejs/svelte-loader"><img width="48" height="48" src="https://worldvectorlogo.com/logos/svelte-1.svg"></a> | | | Official Svelte loader |

Performance

Webpack uses async I/O and has multiple caching levels. This makes webpack fast and incredibly fast on incremental compilations.

Module Formats

Webpack supports ES2015+, CommonJS and AMD modules out of the box. 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 out of the box.

Code Splitting

Webpack allows you to split your codebase into multiple chunks. Chunks are loaded asynchronously at runtime. This reduces the initial loading time.

Optimizations

Webpack can do many optimizations to reduce the output size of your JavaScript by deduplicating frequently used modules, minifying, and giving you full control of what is loaded initially and what is loaded at runtime through code splitting. It can also make your code chunks cache friendly by using hashes.

<h2>Contributing</h2>

We want contributing to webpack to be fun, enjoyable, and educational for anyone, and everyone. We have a vibrant ecosystem that spans beyond this single repo. We welcome you to check out any of the repositories in our organization or webpack-contrib organization which houses all of our loaders and plugins.

Contributions go far beyond pull requests and commits. Although we love giving you the opportunity to put your stamp on webpack, we also are thrilled to receive a variety of other contributions including:

Documentation updates, enhancements, designs, or bugfixes
Spelling or grammar fixes
README.md corrections or redesigns
Adding unit, or functional tests
Triaging GitHub issues -- especially determining whether an issue still persists or is reproducible.
Searching #webpack on twitter and helping someone else who needs help
Teaching others how to contribute to one of the many webpack's repos!
Blogging, speaking about, or creating tutorials about one of webpack's many features.
Helping others in our webpack gitter channel.
The Contributor's Guide to webpack

To get started have a look at our documentation on contributing.

<h3>Creating your own plugins and loaders</h3>

If you create a loader or plugin, we would <3 for you to open source it, and put it on npm. We follow the x-loader, x-webpack-plugin naming convention.

<h2>Support</h2>

We consider webpack to be a low-level tool used not only individually but also layered beneath other awesome tools. Because of its flexibility, webpack isn't always the easiest entry-level solution, however we do believe it is the most powerful. That said, we're always looking for ways to improve and simplify the tool without compromising functionality. If you have any ideas on ways to accomplish this, we're all ears!

If you're just getting started, take a look at our new docs and concepts page. This has a high level overview that is great for beginners!!

If you have discovered a 🐜 or have a feature suggestion, feel free to create an issue on GitHub.

<h2>Current project members</h2>

For information about the governance of the Node.js project, see GOVERNANCE.md.

<h3>TSC (Technical Steering Committee)</h3>

alexander-akait - Alexander Akait <sheo13666q@gmail.com> (he/him)
evenstensberg - Even Stensberg <evenstensberg@gmail.com> (he/him)
ovflowd - Claudio Wunder <cwunder@gnome.org> (he/they)
snitin315 - Nitin Kumar <snitin315@gmail.com> (he/him)
thelarkinn - Sean Larkin <selarkin@microsoft.com> (he/him)

<h3>Core Collaborators</h3>

jhnns - Johannes Ewald <mail@johannesewald.de>
sokra - Tobias Koppers <jackworks@protonmail.co>
spacek33z - Kees Kluskens <kees@webduck.nl>
TheLarkInn - Sean T. Larkin <selarkin@microsoft.com>

<h2>Sponsoring</h2>

Most of the core team members, webpack contributors and contributors in the ecosystem do this open source work in their free time. If you use webpack for a serious task, and you'd like us to invest more time on it, please donate. This project increases your income/productivity too. It makes development and applications faster and it reduces the required bandwidth.

This is how we use the donations:

Allow the core team to work on webpack
Thank contributors if they invested a large amount of time in contributing
Support projects in the ecosystem that are of great value for users
Support projects that are voted most (work in progress)
Infrastructure cost
Fees for money handling

<h3>Premium Partners</h3> <div align="center">

</div> <h3>Other Backers and Sponsors</h3>

Before we started using OpenCollective, donations were made anonymously. Now that we have made the switch, we would like to acknowledge these sponsors (and the ones who continue to donate using OpenCollective). If we've missed someone, please send us a PR, and we'll add you to this list.

<a href="https://angular.io/" target="_blank" title="JS framework">Angular</a> <a href="https://moonmail.io" target="_blank" title="Email Marketing Software">MoonMail</a> <a href="https://monei.net" target="_blank" title="Best payment gateway rates">MONEI</a>

</div> <h3>Gold Sponsors</h3>

Become a gold sponsor and get your logo on our README on GitHub with a link to your site.

</div> <h3>Silver Sponsors</h3>

Become a silver sponsor and get your logo on our README on GitHub with a link to your site.

</div> <h3>Bronze Sponsors</h3>

Become a bronze sponsor and get your logo on our README on GitHub with a link to your site.

</div> <h3>Backers</h3>

Become a backer and get your image on our README on GitHub with a link to your site.

<a href="https://opencollective.com/webpack/backer/0/website?requireActive=false" target="_blank"><img width="30" src="https://opencollective.com/webpack/backer/0/avatar.svg?requireActive=false"></a> <a href="https://opencollective.com/webpack/backer/1/website?requireActive=false" target="_blank"><img width="30" src="https://opencollective.com/webpack/backer/1/avatar.svg?requireActive=false"></a> <a href="https://opencollective.com/webpack/backer/2/website?requireActive=false" target="_blank"><img width="30" src="https://opencollective.com/webpack/backer/2/avatar.svg?requireActive=false"></a> <a href="https://opencollective.com/webpack/backer/3/website?requireActive=false" target="_blank"><img width="30" src="https://opencollective.com/webpack/backer/3/avatar.svg?requireActive=false"></a> <a href="https://opencollective.com/webpack/backer/4/website?requireActive=false" target="_blank"><img width="30" src="https://opencollective.com/webpack/backer/4/avatar.svg?requireActive=false"></a> <a href="https://opencollective.com/webpack/backer/5/website?requireActive=false" target="_blank"><img width="30" src="https://opencollective.com/webpack/backer/5/avatar.svg?requireActive=false"></a> <a href="https://opencollective.com/webpack/backer/6/website?requireActive=false" target="_blank"><img width="30" src="https://opencollective.com/webpack/backer/6/avatar.svg?requireActive=false"></a> <a href="https://opencollective.com/webpack/backer/7/website?requireActive=false" target="_blank"><img width="30" src="https://opencollective.com/webpack/backer/7/avatar.svg?requireActive=false"></a> <a href="https://opencollective.com/webpack/backer/8/website?requireActive=false" target="_blank"><img width="30" src="https://opencollective.com/webpack/backer/8/avatar.svg?requireActive=false"></a> <a href="https://opencollective.com/webpack/backer/9/website?requireActive=false" target="_blank"><img width="30" src="https://opencollective.com/webpack/backer/9/avatar.svg?requireActive=false"></a> <a href="https://opencollective.com/webpack/backer/10/website?requireActive=false" target="_blank"><img width="30" src="https://opencollective.com/webpack/backer/10/avatar.svg?requireActive=false"></a> <a href="https://opencollective.com/webpack/backer/11/website?requireActive=false" target="_blank"><img width="30" src="https://opencollective.com/webpack/backer/11/avatar.svg?requireActive=false"></a> <a href="https://opencollective.com/webpack/backer/12/website?requireActive=false" target="_blank"><img width="30" src="https://opencollective.com/webpack/backer/12/avatar.svg?requireActive=false"></a> <a href="https://opencollective.com/webpack/backer/13/website?requireActive=false" target="_blank"><img width="30" src="https://opencollective.com/webpack/backer/13/avatar.svg?requireActive=false"></a> <a href="https://opencollective.com/webpack/backer/14/website?requireActive=false" target="_blank"><img width="30" src="https://opencollective.com/webpack/backer/14/avatar.svg?requireActive=false"></a> <a href="https://opencollective.com/webpack/backer/15/website?requireActive=false" target="_blank"><img width="30" src="https://opencollective.com/webpack/backer/15/avatar.svg?requireActive=false"></a> <a href="https://opencollective.com/webpack/backer/16/website?requireActive=false" target="_blank"><img width="30" src="https://opencollective.com/webpack/backer/16/avatar.svg?requireActive=false"></a> <a href="https://opencollective.com/webpack/backer/17/website?requireActive=false" target="_blank"><img width="30" src="https://opencollective.com/webpack/backer/17/avatar.svg?requireActive=false"></a> <a href="https://opencollective.com/webpack/backer/18/website?requireActive=false" target="_blank"><img width="30" src="https://opencollective.com/webpack/backer/18/avatar.svg?requireActive=false"></a> <a href="https://opencollective.com/webpack/backer/19/website?requireActive=false" target="_blank"><img width="30" src="https://opencollective.com/webpack/backer/19/avatar.svg?requireActive=false"></a> <a href="https://opencollective.com/webpack/backer/20/website?requireActive=false" target="_blank"><img width="30" src="https://opencollective.com/webpack/backer/20/avatar.svg?requireActive=false"></a> <a href="https://opencollective.com/webpack/backer/21/website?requireActive=false" target="_blank"><img width="30" src="https://opencollective.com/webpack/backer/21/avatar.svg?requireActive=false"></a> <a href="https://opencollective.com/webpack/backer/22/website?requireActive=false" target="_blank"><img width="30" src="https://opencollective.com/webpack/backer/22/avatar.svg?requireActive=false"></a> <a href="https://opencollective.com/webpack/backer/23/website?requireActive=false" target="_blank"><img width="30" src="https://opencollective.com/webpack/backer/23/avatar.svg?requireActive=false"></a> <a href="https://opencollective.com/webpack/backer/24/website?requireActive=false" target="_blank"><img width="30" src="https://opencollective.com/webpack/backer/24/avatar.svg?requireActive=false"></a> <a href="https://opencollective.com/webpack/backer/25/website?requireActive=fal

[![npm][npm]][npm-url]

Install
Introduction
Concepts
Contributing
Support
Current project members
- TSC (Technical Steering Committee)
- Core Collaborators
Sponsoring
Special Thanks

<h2>Install</h2>

Install with npm:

npm install --save-dev webpack

Install with yarn:

yarn add webpack --dev

<h2>Introduction</h2>

TL;DR

Bundles ES Modules, CommonJS, and AMD modules (even combined).
Can create a single bundle or multiple chunks that are asynchronously loaded at runtime (to reduce initial loading time).
Dependencies are resolved during compilation, reducing the runtime size.
Loaders can preprocess files while compiling, e.g. TypeScript to JavaScript, Handlebars strings to compiled functions, images to Base64, etc.
Highly modular plugin system to do whatever else your application requires.

Learn about webpack through videos!

Get Started

Check out webpack's quick Get Started guide and the other guides.

Browser Compatibility

<h2>Concepts</h2>

Plugins

Webpack has a rich plugin interface. Most of the features within webpack itself use this plugin interface. This makes webpack very flexible.

Loaders

Webpack enables the use of loaders to preprocess files. This allows you to bundle any static resource way beyond JavaScript. You can easily write your own loaders using Node.js.

Loaders are activated by using loadername! prefixes in require() statements, or are automatically applied via regex from your webpack configuration.

Files

JSON

Transpiling

| Name | Status | Install Size | Description | | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------: | :------------: | :------------------------------------------------------------------------------------------------ | | <a href="https://github.com/babel/babel-loader"><img width="48" height="48" title="babel-loader" src="https://worldvectorlogo.com/logos/babel-10.svg"></a> | | | Loads ES2015+ code and transpiles to ES5 using <a href="https://github.com/babel/babel">Babel</a> | | <a href="https://github.com/TypeStrong/ts-loader"><img width="48" height="48" src="https://raw.githubusercontent.com/microsoft/TypeScript-Website/f407e1ae19e5e990d9901ac8064a32a8cc60edf0/packages/typescriptlang-org/static/branding/ts-logo-128.svg"></a> | | | Loads TypeScript like JavaScript | | <a href="https://github.com/webpack-contrib/coffee-loader"><img width="48" height="48" src="https://worldvectorlogo.com/logos/coffeescript.svg"></a> | | | Loads CoffeeScript like JavaScript |

Templating

| Name | Status | Install Size | Description | | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------: | :--------------: | :-------------------------------------------------------------------------------------- | | <a href="https://github.com/webpack-contrib/html-loader"><img width="48" height="48" src="https://worldvectorlogo.com/logos/html5-2.svg"></a> | | | Exports HTML as string, requires references to static resources | | <a href="https://github.com/pugjs/pug-loader"><img width="48" height="48" src="https://cdn.rawgit.com/pugjs/pug-logo/master/SVG/pug-final-logo-_-colour-128.svg"></a> | | | Loads Pug templates and returns a function | | <a href="https://github.com/webdiscus/pug-loader"><img width="48" height="48" src="https://cdn.rawgit.com/pugjs/pug-logo/master/SVG/pug-final-logo-_-colour-128.svg"></a> | | | Compiles Pug to a function or HTML string, useful for use with Vue, React, Angular | | <a href="https://github.com/peerigon/markdown-loader"><img width="48" height="48" src="https://worldvectorlogo.com/logos/markdown.svg"></a> | | | Compiles Markdown to HTML | | <a href="https://github.com/posthtml/posthtml-loader"><img width="48" height="48" src="https://posthtml.github.io/posthtml/logo.svg"></a> | | | Loads and transforms a HTML file using PostHTML | | <a href="https://github.com/pcardune/handlebars-loader"><img width="48" height="48" src="https://worldvectorlogo.com/logos/handlebars-1.svg"></a> | | | Compiles Handlebars to HTML |

Styling

| Name | Status | Install Size | Description | | :-------------------------------------------------------------------------------------------------------------------------------------------: | :------------: | :-------------: | :----------------------------------------------------------------------- | | <a href="https://github.com/webpack-contrib/style-loader"><style></a> | | | Add exports of a module as style to DOM | | <a href="https://github.com/webpack-contrib/css-loader"><img width="48" height="48" src="https://worldvectorlogo.com/logos/css-3.svg"></a> | | | Loads CSS file with resolved imports and returns CSS code | | <a href="https://github.com/webpack-contrib/less-loader"><img width="48" height="48" src="https://worldvectorlogo.com/logos/less-63.svg"></a> | | | Loads and compiles a LESS file | | <a href="https://github.com/webpack-contrib/sass-loader"><img width="48" height="48" src="https://worldvectorlogo.com/logos/sass-1.svg"></a> | | | Loads and compiles a Sass/SCSS file | | <a href="https://github.com/shama/stylus-loader"><img width="48" height="48" src="https://worldvectorlogo.com/logos/stylus.svg"></a> | | | Loads and compiles a Stylus file | | <a href="https://github.com/postcss/postcss-loader"><img width="48" height="48" src="https://worldvectorlogo.com/logos/postcss.svg"></a> | | | Loads and transforms a CSS/SSS file using PostCSS |

Frameworks

| Name | Status | Install Size | Description | | :----------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------: | :-------------: | :----------------------------------------------------------------------------------------------------- | | <a href="https://github.com/vuejs/vue-loader"><img width="48" height="48" src="https://worldvectorlogo.com/logos/vue-9.svg"></a> | | | Loads and compiles Vue Components | | <a href="https://github.com/webpack-contrib/polymer-webpack-loader"><img width="48" height="48" src="https://worldvectorlogo.com/logos/polymer.svg"></a> | | | Process HTML & CSS with preprocessor of choice and require() Web Components like first-class modules | | <a href="https://github.com/TheLarkInn/angular2-template-loader"><img width="48" height="48" src="https://worldvectorlogo.com/logos/angular-icon-1.svg"></a> | | | Loads and compiles Angular 2 Components | | <a href="https://github.com/riot/webpack-loader"><img width="48" height="48" src="https://worldvectorlogo.com/logos/riot.svg"></a> | | | Riot official webpack loader | | <a href="https://github.com/sveltejs/svelte-loader"><img width="48" height="48" src="https://worldvectorlogo.com/logos/svelte-1.svg"></a> | | | Official Svelte loader |

Performance

Webpack uses async I/O and has multiple caching levels. This makes webpack fast and incredibly fast on incremental compilations.

Module Formats

Code Splitting

Webpack allows you to split your codebase into multiple chunks. Chunks are loaded asynchronously at runtime. This reduces the initial loading time.

Optimizations

<h2>Contributing</h2>

Documentation updates, enhancements, designs, or bugfixes
Spelling or grammar fixes
README.md corrections or redesigns
Adding unit, or functional tests
Triaging GitHub issues -- especially determining whether an issue still persists or is reproducible.
Searching #webpack on twitter and helping someone else who needs help
Teaching others how to contribute to one of the many webpack's repos!
Blogging, speaking about, or creating tutorials about one of webpack's many features.
Helping others in our webpack gitter channel.
The Contributor's Guide to webpack

To get started have a look at our documentation on contributing.

<h3>Creating your own plugins and loaders</h3>

If you create a loader or plugin, we would <3 for you to open source it, and put it on npm. We follow the x-loader, x-webpack-plugin naming convention.

<h2>Support</h2>

If you're just getting started, take a look at our new docs and concepts page. This has a high level overview that is great for beginners!!

If you have discovered a 🐜 or have a feature suggestion, feel free to create an issue on GitHub.

<h2>Current project members</h2>

For information about the governance of the Node.js project, see GOVERNANCE.md.

<h3>TSC (Technical Steering Committee)</h3>

alexander-akait - Alexander Akait <sheo13666q@gmail.com> (he/him)
evenstensberg - Even Stensberg <evenstensberg@gmail.com> (he/him)
ovflowd - Claudio Wunder <cwunder@gnome.org> (he/they)
snitin315 - Nitin Kumar <snitin315@gmail.com> (he/him)
thelarkinn - Sean Larkin <selarkin@microsoft.com> (he/him)

<h3>Core Collaborators</h3>

jhnns - Johannes Ewald <mail@johannesewald.de>
sokra - Tobias Koppers <jackworks@protonmail.co>
spacek33z - Kees Kluskens <kees@webduck.nl>
TheLarkInn - Sean T. Larkin <selarkin@microsoft.com>

<h2>Sponsoring</h2>

This is how we use the donations:

Allow the core team to work on webpack
Thank contributors if they invested a large amount of time in contributing
Support projects in the ecosystem that are of great value for users
Support projects that are voted most (work in progress)
Infrastructure cost
Fees for money handling

<h3>Premium Partners</h3> <div align="center">

</div> <h3>Other Backers and Sponsors</h3>

</div> <h3>Gold Sponsors</h3>

Become a gold sponsor and get your logo on our README on GitHub with a link to your site.

</div> <h3>Silver Sponsors</h3>

Become a silver sponsor and get your logo on our README on GitHub with a link to your site.

</div> <h3>Bronze Sponsors</h3>

Become a bronze sponsor and get your logo on our README on GitHub with a link to your site.

</div> <h3>Backers</h3>

Become a backer and get your image on our README on GitHub with a link to your site.

Vite vs Webpack: Modern vs Traditional Build Tools

Detailed Comparison

Technical Analysis

featureComparison

typescriptSupport

browserCompatibility

dependencies

performance

Ecosystem Analysis

frameworkCompatibility

communityActivity

documentationQuality

maintenanceStatus

Performance Comparison

bundleSizeAnalysis

runtimePerformance

loadingTime

memoryUsage

Code Examples

Vite Example

Webpack Example

Recommendation

Summary

Details

Similar Packages

Parcel

Snowpack

Rollup

esbuild

WMR

vite ⚡

Table of Contents

Learn about webpack through videos!

Get Started

Browser Compatibility

Files

JSON

Transpiling

Templating

Styling

Frameworks

Performance

Module Formats

Vite vs Webpack: Modern vs Traditional Build Tools

Detailed Comparison

Technical Analysis

featureComparison

typescriptSupport

browserCompatibility

dependencies

performance

Ecosystem Analysis

frameworkCompatibility

communityActivity

documentationQuality

maintenanceStatus

Performance Comparison

bundleSizeAnalysis

runtimePerformance

loadingTime

memoryUsage

Code Examples

Vite Example

Webpack Example

Recommendation

Summary

Details

Who's Using These Packages

vite

generator-jhipster

dumi

bati

JSPrismarine

vr360

webpack

mint-ui

OverVue

h265web.js

girder

xpressengine