Webpack - A bundler for javascript and friends

  •        85

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
Implementation
License
Platform

   




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.

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.

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.

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.

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.


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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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/.

worker-loader - A webpack loader that registers a script as a Web Worker

  •    Javascript

This module requires a minimum of Node v6.9.0 and Webpack v4.0.0. And run webpack via your preferred method.

elm-webpack-loader - Webpack loader for the Elm programming language.

  •    Javascript

Webpack loader for the Elm programming language. It is aware of Elm dependencies and tracks them. This means that in --watch mode, if you require an Elm module from a Webpack entry point, not only will that .elm file be watched for changes, but any other Elm modules it imports will be watched for changes as well.