JavaScript Bundlers

Features ? Blazing fast bundle times - multicore compilation, and a filesystem cache for fast rebuilds even after a restart. ? Out of the box support for JS, CSS, HTML, file assets, and

 39.8k

Webpack Bundle Analyzer Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap What is this for? Just take a look at this demo: This module will help you: Re

 11.5k

Microbundle The zero-configuration bundler for tiny modules, powered by Rollup. ✨ Features: One dependency to bundle your library using only a package.json Support for ESnext & async/await (v

 6.7k

Shipit Shipit is an automation engine and a deployment tool written for node / iojs. Shipit was built to be a Capistrano alternative for people who don't know ruby, or who experienced some issues with it. If you want to

 5.3k

Introduction Laravel Mix provides a clean, fluent API for defining basic webpack build steps for your applications. Mix supports several common CSS an

 4.9k

webpack is a module bundler. webpack takes modules with dependencies and generates static assets representing those modules. Awesome Webpack A curated list of awesome Webpack resources, libraries, tools and

 4.5k
Siddharth Kshetrapal
Keep your bundle size in check

siddharthkp/bundlesize

Keep your bundle size in check Setup npm install bundlesize --save-dev # or yarn add bundlesize --dev Usage Add it to your scripts in package.json "scripts": { "test"

 4.3k

A bundler that does it right FuseBox on slack FUSEBOX v4 is here A re-write of FuseBox with Major Improvements is available in the @next release. Please help test it and contrubite

 4.1k
webpack-contrib
CSS Loader

webpack-contrib/css-loader

css-loader The css-loader interprets @import and url() like import/require() and will resolve them. Getting Started ⚠ To use css-loader, [email protected] is

 4k

Optimize your libraries with webpack Using a library in your webpack project? Use these tips to make your bundle smaller! Want to add a tip? See the contribution guide and make a pull request! Contents: async async-es

 3.2k

webpack-chain Use a chaining API to generate and simplify the modification of Webpack 2 and 3 configurations. This documentation corresponds to v4 of webpack-chain. v3 docs v2 docs v1 docs Note: while webpack-chain is

 2.8k
null
Pack JS code fast & easy

fastpack/fastpack

Fastpack Pack JS code into a single bundle fast & easy. Why? Because JavaScript builds should be faster! Here is an example benchmark of bundling ~1600 modules together. Fastpack Parcel

 2.3k

preload-webpack-plugin A webpack plugin for automatically wiring up asynchronous (and other types) of JavaScript chunks using <link rel='preload'>. This helps with lazy-loading. Note: This is an extension plugin for

 2.2k

lqip-loader: low quality images placeholders for webpack demo npm install --save-dev lqip-loader Generating Base64 & dominant colours palette for a jpeg image imported in your JS bundle: PS: The large

 1.2k

Splittable Splittable is a next-generation module bundler for JavaScript with support for super simple code splitting. ES6 modules. CommonJS modules (with some caveats). extremely efficient packing of modules. dead

 954
Fedor Indutny
CommonJS Tree Shaker plugin for WebPack

indutny/webpack-common-shake

CommonJS Tree Shaker plugin for WebPack ALPHA TESTING Please file an issue if anything is broken. NOTE: webpack version 3 may be needed in order to run this. Why? There are vast amount of CommonJS modules out the

 899

ESL (Enterprise Standard Loader) ESL是一个浏览器端、符合AMD的标准加载器,适合用于现代Web浏览器端应用的入口与模块管理。 ESL is a browser-only, amd-compliant module loader. In modern web app

 825

Bonsai Trim your javascript dependency tree. Users guide The quickest way to get started is to generate a Webpack stats file, and then drag and drop it into https://pinterest.github.io/bonsai/analyze. See more do

 734

Webpack Simple Starter A simple webpack starter without framework (Like Vue, React, Angular, etc.). This project is inspired from vue-cli webpack project Getting Started First, install the modules that the project nee

 660

cache-loader The cache-loader allow to Caches the result of following loaders on disk (default) or in the database. Getting Started To begin, you'll need to install cache-loader: npm install --save

 645
Arthur Buldauskas
:sparkles: WASM webpack loader

ballercat/wasm-loader

WASM Binary Module loader for Webpack A simple .wasm binary file loader for Webpack. Import your wasm modules directly into your bundle as Constructors which return WebAssembly.Instance. This avoids the need to use fetch and p

 634

TypeScript Module Loader Features Supports node <file> usage Supports ESM --loader usage† Supports --require hook usage Optional configuration file fo

 430

preact-starter Webpack3 boilerplate for building SPA / PWA / offline front-end apps with ⚛️ Preact Using preact-starter will kickstart your next application! ? It is designed to fit the "90% use-case" for

 386

Note: This only works on Webpack 4, if you're still on Webpack 3 or below please use version 1.x CDN extension for the HTML Webpack Plugin Enhances html-webpack-plugin functionality by allowing you to specify the modules you

 329
evergiving
Webpack plugin for enabling Subresource Integrity.

waysact/webpack-subresource-integrity

webpack-subresource-integrity Webpack plugin for enabling Subresource Integrity. Subresource Integrity (SRI) is a security feature that enables browsers to verify that files they fetch (for example, from a CDN) are deliv

 324
null
:fire: Hot reload webpack bundles on the server

60frames/webpack-hot-server-middleware

Webpack Hot Server Middleware Webpack Hot Server Middleware is designed to be used in conjunction with webpack-dev-middleware (and optionally webpack-hot-middleware) to hot update Webpack bundles on the server. Wh

 324
Addy Osmani
A Webpack plugin for Lighthouse

addyosmani/webpack-lighthouse-plugin

Webpack Lighthouse Plugin This plugin allows you to run Lighthouse from a Webpack build. Installation npm install --save-dev webpack-lighthouse-plugin Setup In webpack.config.js: const WebpackLightho

 279

Webpack Deadcode Plugin Webpack plugin to detect unused files and unused exports in used files Installation Via npm: $ npm install webpack-deadcode-plugin --save-dev Via yarn: $ yarn add -D webpack-deadco

 239

electrify What is Electrify? Electrify is an webpack visualizer tool for visualizing and analyzing Webpack bundles, it is a UI tool based on D3.js for visualizing the module tree of electrode + webpack project bundl

 232

Demopack Fire up a pre-configured, live reloading Webpack server that supports React, (S)CSS and files for quick demos and tutorials. Like create-react-app, but without needing to create a new project and npm install all the thi

 176

react-hot-loader-loader A Webpack Loader that automatically inserts react-hot-loader to your app, without any changes in your app code. All it takes is a simple regex to indicate where your "App" Components are. This module does

 175

[deprecated] AoT loader ⚠️ This project is deprecated ⚠️ Project is deprecated as AoT mode will be a default soon, we suggest using ngc until then as the official offering from Angular. This loader allow

 121
Formidable
Preview npm publish changes.

FormidableLabs/publish-diff

Publish Diff View diffs of what you will publish to npm before you really do! Publishing a package from a local repository runs the risk of last minute human mistakes like: deletions mutations additions to the file

 93
Sindre Sorhus
Dynamically add an asset to the Webpack graph

sindresorhus/add-asset-webpack-plugin

add-asset-webpack-plugin Dynamically add an asset to the webpack graph Install $ npm install add-asset-webpack-plugin Usage const AddAssetPlugin = require('add-asset-webpack-plugin'); module.expo

 91

SVG Sprite Webpack Plugin Description A webpack plugin/loader to make SVG &lt;use&gt;-based icon systems easy in Webpack. Creates an SVG sprite with &lt;symbol&gt; tags from imported SVG files, and returns a URL to

 73
Travis Arnold
Sketch to SVG JSON loader module for webpack

souporserious/sketch-to-svg-json-loader

sketch-to-svg-json-loader Import Sketch files as SVG JSON data through Webpack. Inspired by @david.gilbertson's wonderful article on icons as react components. Install yarn add sketch-to-svg-json-loader --dev npm

 65

bundler-performance-benchmark Why Showing numbers means nothing if you can't back it up. This is a joint effort between all bundlers involved to create a fair and unbiased set of benchmarks for build and size performan

 61
Electrode
A HTML based reporter for webpack dev server

electrode-io/electrode-webpack-reporter

Electrode Webpack Reporter An HTML based reporter for webpack-dev-server. Adds a new route /reporter to your webpack-dev-server HTTP server. Usage const WebpackReporter = require("electrode-webpack-reporter");

 59
Sindre Sorhus
Simplified `NODE_ENV` handling with webpack

sindresorhus/node-env-webpack-plugin

node-env-webpack-plugin Simplified NODE_ENV handling with webpack Install $ npm install node-env-webpack-plugin Usage 'use strict'; const path = require('path'); + const NodeEnvPlugin = requir

 54

blrplt Javascript Write ES6+ or React Javascript and get it linted with the AirBnb eslint config. Styles All your styles get autoprefixed and sass compiled. It even has some lovely opinionated stylelint con

 42
TJ Holowaychuk
Webpack visualizer as a Neutrino preset

tj/neutrino-preset-visualizer

neutrino-preset-visualizer Webpack visualizer as a Neutrino preset to view where space is allocated. Outputs ./build/stats.html. Installation Grab the preset: $ yarn add -D neutrino-preset-visualizer Add it to yo

 41

webpack-proxy Install yarn add webpack-proxy Usage Let's say you want to use buble-loader, you can just add it to your webpack config without installing buble-loader and buble, since webpack-prox

 39
Sam Zhao
CLI tool to generate webpack.config.js

zhaoshengjun/webpack-config

wepack-config CLI tool to generate webpack configuration file (webpack.config.js) for you. Usage npm i -g create-webpack-config webpack-config init After that, you can run npm i npm start Why Peopl

 38
Sencha, Inc
Ext JS Dynamic Package Loader

sencha/package-loader

package-loader Ext JS Dynamic Package Loader Requirements This package is used by Ext JS applications and Sencha Cmd 6.5 Install Sencha Cmd Download Sencha Ext JS. We recommend extracting Ext JS into a "sencha-s

 34
EGOIST
bundle and `require` a file

egoist/bundle-require

? You can help the author become a full-time open-source maintainer by sponsoring him on GitHub. bundle-require Use Case Projects like Vite need to l

 32

webpack-codemods JSCodeshift Codemods to automatically convert webpack config from v1 to v2 ? ? ? ? ? ? This repository is deprecated in favor of https://github.com/webpack/webpack-cli

 31

Proxy Local Assets Have you ever been asked to make CSS or JS changes to a live website that you have no back-end access to? If so, you know how much of a pain in the ass it can be. This is a simple BrowserSync-based Gulpfile th

 25

EMP - Micro Frontends solution Base on Webpack 5 & Module Federation English | 简体中文 Projects Project NPM Info @efox/emp-cli CLI @efox/emp-tsconfig Typ

 22
Even Stensberg
Webpack Plugin for extended bundle info

evenstensberg/webpack-plugin-extended-network

webpack-plugin-extended-network webpack plugin for analyzing how your bundle performs in a browser. This plugin is experimental and the API might change in the future. The plugin uses chrome-protocol and works with code-splitting

 21
Luuk de Gram
Experimental wasm linker

Luukdegram/zwld

zwld Experimental linker for wasm object files. The idea is to implement a linker that stays close to wasm-ld in regards to features so that one day t

 21
hiroki osame
Webpack plugin to tree-shake and minify JSON modules

privatenumber/webpack-json-access-optimizer

webpack-json-access-optimizer Optimize JSON modules that are referenced via accessor function. For example, i18n locale JSONs. Features Tree shaking R

 16

Sushi Hub restaurant page This is a Sushi Hub restaurant web page, you'll find ancient Japanese foods in our specials section Note: Only large screens

 13

To-do is a web app that helps to organize your day to day activities. It lists all the activities that you need to be completed and allows you to mark them as complete or not. It's a minimalistic website built using JavaScript ES6, Webpack and CSS.

 9

Todo-list-webpack This website Todo-list-webpack provides users a convenient way to keep track of their todos. Built With HTML CSS JavaScript Linters

 9

Leaderboard This is a Webpack Project Leaderboard and use API to add your game score and see a list of the other scores What I did in this project: Se

 8
Vivek Patel
A boilerplate code to build a chrome extension with react and webpack.

vivek9patel/chrome-extension-react-boilerplate

Chrome Extension with React.js Boilerplate Boilerplate for your chrome extension with react.js and webpack Background Creating a file structure for de

 5

Vue 3 SSR with Webpack 4 HMR Play with it right in the browser! Features Hot reloading for everything inside src folder Production-ready build Integra

 4
hiroki osame
Utility functions to test Webpack loaders/plugins

privatenumber/webpack-test-utils

webpack-test-utils Utility functions to test Webpack loaders/plugins Features In-memory builds Uses an in-memory file-system for faster builds that do

 3