Webpack - A bundler for javascript and friends

We have collection of more than 1 Million open source products ranging from Enterprise product to small libraries in all platforms. We aggregate information from all open source repositories. Search and find the best for your needs. Check out projects section.

Webpack - A bundler for javascript and friends

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.

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.

https://webpack.js.org/
https://github.com/webpack/webpack

Tags	webpack module-bundler module-loader loaders plugins build-tool web web-performance compiler javascript-compiler webpack2 commonjs amd esm es6 javascript-modules
Implementation	Javascript
License	MIT
Platform	NodeJS

Related Projects

Steal - Universal module loader

Javascript

steal is unique because it can load JavaScript modules defined in ES6, AMD, and CommonJS formats (unlike most other module loaders, which only support one of these formats at a time). In JavaScript, the word "modules" refers to small units of independent, reusable code. They are the foundation of many JavaScript design patterns, and can look like this in ES6.

stealjs module-loader amd build-tool commonjs module-bundler plugins web donejs modules es6 bundling

Parcel - Blazing fast, zero configuration web application bundler

Javascript

Parcel is a blazing fast zero configuration web application bundler. It automatically transforms modules using Babel, PostCSS, and PostHTML when needed - even node_modules. It has out of the box support for JS, CSS, HTML, file assets, and more - no plugins to install.

module-bundler build-tool css html assets web compiler commonjs es6 modules web-application-bundler js-compiler javascript-compiler minify

webpack-closure-compiler - Google Closure Compiler plugin for Webpack

Javascript

Closure Compiler is the most advanced JavaScript optimization tool. It generates smallest bundle and emits efficient JavaScript code by doing whole program analysis and optimization, removing closures and inlining function calls, as well as tree-shaking for AMD, CommonJS and ES2015 modules. While there's JavaScript version of Closure Compiler, the original compiler is written in Java and thus Java version is more complete and performs better in terms of JavaScript code optimizations and compilation speed. If you want to use Java-based compiler, make sure you have installed Java SDK.

closure-compiler webpack-closure-compiler optimization tree-shaking webpack closure compiler build optimize dead code plugin

webpack.js.org - New repository for webpack documentation and more!

Javascript

Guides, documentation, and all things webpack.We haven't created issues for the other sections yet, but they will be coming soon. For dev-related work please see General - Current Longterm Plan, which will soon be replaced by a more dev-specific issue.

webpack webpack2 webpack-plugin webpack-loader webpack-tutorial documentation docs web web-performance performance bundle bundler bundling nodejs css build tool

webpack-book - From apprentice to master (CC BY-NC-ND)

Javascript

IMPORTANT! If you want to support the development of this book, you can purchase a copy at Leanpub. A part (~30%) of the proceedings will go directly to the author of webpack to support its development. Webpack, a module bundler, solves a significant problem for web developers. It can be daunting to learn but once you grok it, life gets easier. The purpose of this book is to make it easier to pick up the tool while learning more advanced techniques as well. You can read the book online.

survivejs webpack book book-series ebook frontend leanpub tutorial webpack-tutorial webpack2 webpack2-tutorial webpack3 webpack3-tutorial webpack3-demo webpack-4 react

es6-module-transpiler - Tomorrow’s JavaScript module syntax today

Javascript

This project is part of esnext, which has merged with Babel. All the features of esnext are supported by Babel, and more. All the tests from esnext have been ported over to Babel to ensure that switchers will have minimal code changes to make. The maintainers of esnext will continue working on Babel to bring better spec compliance, ES6 feature support, and performance. If you want a fast tool with bundling support as found in this project, you should check out Rollup. ES6 Module Transpiler is an experimental compiler that allows you to write your JavaScript using a subset of the ES6 module syntax, and compile it into AMD or CommonJS modules.

es6 module transpile amd commonjs

minipack - 📦 A simplified example of a modern module bundler written in JavaScript

Javascript

As front-end developers, we spend a lot of time working with tools like Webpack, Browserify, and Parcel. Understanding how those tools work can help us make better decisions on how we write our code. By understanding how our code turns into a bundle and how that bundle looks like we can also debug it better.

parcel-bundler webpack example browserify modules commonjs es6-modules module-bundler es2015

babel-plugin-webpack-loaders - babel 6 plugin which allows to use webpack loaders

Javascript

Since plugin was published, there were a lot of changes in testing software. Be sure in most(all) cases you DON'T need this plugin for testing. I highly recommend you to use jest for testing, and use moduleNameMapper (identity-obj-proxy, etc) to mock CSS-Modules and other webpack loaders. This Babel 6 plugin allows you to use webpack loaders in Babel. It's now easy to run universal apps on the server without additional build steps, to create libraries as usual with babel src --out-dir lib command, to run tests without mocking-prebuilding source code. It just replaces require - import statements with webpack loaders results. Take a look at this Babel build output diff to get the idea.

babel webpack loader css-modules css-loader

workerize-loader - 🏗️ Automatically move a module into a Web Worker (Webpack loader)

Javascript

A webpack loader that moves a module and its dependencies into a Web Worker, automatically reflecting exported functions as asynchronous proxies.

webpack-loader webpack-plugin webpack worker web-worker loader thread workerize

comlink-loader - Webpack loader to offload modules to Worker threads seamlessly using Comlink.

Javascript

Offload modules to Worker threads seamlessly using Comlink. The goal of comlink-loader is to make the fact that a module is running inside a Worker nearly transparent to the developer.

comlink worker webworker threading webpack webpack-loader loader web-worker thread

pax - The fastest JavaScript bundler in the galaxy.

Rust

The fastest JavaScript bundler in the galaxy. Fully supports ECMAScript module syntax (import/export) in addition to CommonJS require(<string>). Because your bundler is too slow.

module-bundler es6 ecmascript commonjs modules bundler browser web build-tool

bootstrap-loader - Load Bootstrap styles and scripts in your Webpack bundle

Javascript

If your team might need my help, please email me for a free half-hour project consultation, on anything from React on Rails to any aspect of web or mobile application development for both consumer and enterprise products. Intersted in optimizing your webpack setup for React on Rails including code splitting with react-router v4, webpack v4, and react-loadable? Contact me.

bootstrap-loader bootstrap-variables shakacode bootstrap-mixins bootstrap-styles webpack2 webpack-loader twitter-bootstrap webpack sass-loader bootstrap twitter

conditioner - 💆🏻 Frizz free, context-aware, JavaScript modules

Javascript

Conditioner provides a straight forward Progressive Enhancement based solution for linking JavaScript modules to DOM elements. Modules can be linked based on contextual parameters like viewport size and element visibilty making Conditioner your perfect Responsive Design companion. Mount a component (like a Date Picker, Section Toggler or Carrousel), but only do it on wide viewports and when the user has seen it.

conditioner es6 import responsive amd module-loader mediaqueries webpack browserify requirejs media-queries media-query module dynamic design context conditions shampoo

bonsai - Understand the tree of dependencies inside your webpack bundles, and trim away the excess.

Javascript

Trim your javascript dependency tree. 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.

webpack2 javascript-tools commonjs es6 bonsai webpack tool analyze analyse bundle dependencies

redux-webpack-es6-boilerplate - A starter project for modern React apps with Redux

Javascript

Note: If you still want to use a previous version, please checkout old-original-structure branch. A boilerplate using the power and simplicity of React, Redux, Webpack 2 + HMR, and ES6 + JSX via Babel. Includes Webpack's Tree Shaking configuration. It's suitable for scalable applications and organized using the custom variation of the Ducks pattern — approach when each module's entry file (feature-name.js) contains all of its related constants, actions/action creators, selectors and its reducer.

react boilerplate react-boilerplate redux redux-boilerplate webpack2 react-router flow tdd-workflow tdd sentry static-types css-modules sass redux-devtools starter-kit starter-template starter-react es6 hmr hot babel webpack architecture webpack-dev-middleware webpack-hot-middleware starter

rollup - Next-generation ES6 module bundler

Javascript

Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application. It uses the new standardized format for code modules included in the ES6 revision of JavaScript, instead of previous idiosyncratic solutions such as CommonJS and AMD. ES6 modules let you freely and seamlessly combine the most useful individual functions from your favorite libraries. This will eventually be possible natively, but Rollup lets you do it today.Install with npm install --global rollup. Rollup can be used either through a command line interface with an optional configuration file, or else through its JavaScript API. Run rollup --help to see the available options and parameters. The starter project templates, rollup-starter-lib and rollup-starter-app, demonstrate common configuration options, and more detailed instructions are available throughout the user guide.

modules bundler bundling es6 optimizer

webpack-starter - ✨ A lightweight foundation for your next webpack based frontend project.

Javascript

A lightweight foundation for your next webpack based frontend project. When you run npm run build we use the mini-css-extract-plugin to move the css to a separate file and included in the head of your index.html, so that the styles are applied before any javascript gets loaded. We disabled this function for the dev version, because the loader doesn't support hot module replacement.

starter-kit boilerplate frontend webpack sass babel es6 startkit webdev

isomorphic-style-loader - CSS style loader for Webpack that is optimized for isomorphic (universal) web apps

Javascript

CSS style loader for Webpack that works similarly to style-loader, but is optimized for critical path CSS rendering and also works great in the context of isomorphic apps. It provides two helper methods on to the styles object - ._insertCss() (injects CSS into the DOM) and ._getCss() (returns a CSS string).Note: Configuration is the same for both client-side and server-side bundles. For more information visit https://webpack.js.org/configuration/module/.

webpack webpack-loader loader css scss style styles style-loader react reactjs isomorphic universal critical-css critical-path-css

esbuild - An extremely fast JavaScript bundler and minifier

The main goal of the esbuild bundler project is to bring about a new era of build tool performance, and create an easy-to-use modern bundler along the way. Check out the getting started instructions if you want to give esbuild a try.

react css typescript es6 compiler jsx commonjs minifier tsx module-bundler