Code Monkey home page Code Monkey logo

webpack / webpack Goto Github PK

View Code? Open in Web Editor NEW
64.2K 1.5K 8.7K 62.57 MB

A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.

Home Page:

License: MIT License

JavaScript 98.82% CSS 0.85% CoffeeScript 0.01% HTML 0.01% WebAssembly 0.11% Pug 0.01% Less 0.01% TypeScript 0.19%
webpack javascript module-bundler loaders plugins build-tool web web-performance compiler javascript-compiler

webpack's Introduction


node builds2 coverage licenses PR's welcome

install size


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.

Table of Contents

  1. Install
  2. Introduction
  3. Concepts
  4. Contributing
  5. Support
  6. Core Team
  7. Sponsoring
  8. Premium Partners
  9. Other Backers and Sponsors
  10. Gold Sponsors
  11. Silver Sponsors
  12. Bronze Sponsors
  13. Backers
  14. Special Thanks


Install with npm:

npm install --save-dev webpack

Install with yarn:

yarn add webpack --dev


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.


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

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.


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

Name Status Install Size Description
mini-css-extract-plugin mini-css-npm mini-css-size Extracts CSS into separate files. It creates a CSS file per JS file which contains CSS.
compression-webpack-plugin compression-npm compression-size Prepares compressed versions of assets to serve them with Content-Encoding
html-webpack-plugin html-plugin-npm html-plugin-size Simplifies creation of HTML files (index.html) to serve your bundles
pug-plugin pug-plugin-npm pug-plugin-size Renders Pug files to HTML, extracts JS and CSS from sources specified directly in Pug.

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.


Name Status Install Size Description
val-loader val-npm val-size Executes code as module and considers exports as JS code


Name Status Install Size Description
cson-npm cson-size Loads and transpiles a CSON file


Name Status Install Size Description
babel-npm babel-size Loads ES2015+ code and transpiles to ES5 using Babel
type-npm type-size Loads TypeScript like JavaScript
coffee-npm coffee-size Loads CoffeeScript like JavaScript


Name Status Install Size Description
html-npm html-size Exports HTML as string, requires references to static resources
pug-npm pug-size Loads Pug templates and returns a function
pug3-npm pug3-size Compiles Pug to a function or HTML string, useful for use with Vue, React, Angular
md-npm md-size Compiles Markdown to HTML
posthtml-npm posthtml-size Loads and transforms a HTML file using PostHTML
hbs-npm hbs-size Compiles Handlebars to HTML


Name Status Install Size Description
<style> style-npm style-size Add exports of a module as style to DOM
css-npm css-size Loads CSS file with resolved imports and returns CSS code
less-npm less-size Loads and compiles a LESS file
sass-npm sass-size Loads and compiles a Sass/SCSS file
stylus-npm stylus-size Loads and compiles a Stylus file
postcss-npm postcss-size Loads and transforms a CSS/SSS file using PostCSS


Name Status Install Size Description
vue-npm vue-size Loads and compiles Vue Components
polymer-npm polymer-size Process HTML & CSS with preprocessor of choice and require() Web Components like first-class modules
angular-npm angular-size Loads and compiles Angular 2 Components
riot-npm riot-size Riot official webpack loader
svelte-npm svelte-size Official Svelte loader


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.

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

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.


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

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

If you are worried or don't know where to start, you can always reach out to Sean Larkin (@TheLarkInn) on Twitter or simply submit an issue and a maintainer can help give you guidance!

We have also started a series on our Medium Publication called The Contributor's Guide to webpack. We welcome you to read it and post any questions or responses if you still need help.

Looking to speak about webpack? We'd love to review your talk abstract/CFP! You can email it to webpack [at] opencollective [dot] com and we can give pointers or tips!!!

Creating your own plugins and loaders

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.


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!!

Looking for webpack 1 docs? Please check out the old wiki, but note that this deprecated version is no longer supported.

If you want to discuss something or just need help, here is our Gitter room where there are always individuals looking to help out!

If you are still having difficulty, we would love for you to post a question to StackOverflow with the webpack tag. It is much easier to answer questions that include your webpack.config.js and relevant files! So if you can provide them, we'd be extremely grateful (and more likely to help you find the answer!)

If you are twitter savvy you can tweet #webpack with your question and someone should be able to reach out and help also.

If you have discovered a ๐Ÿœ or have a feature suggestion, feel free to create an issue on GitHub.


FOSSA Status

Core Team

Tobias Koppers


Founder of webpack

Johannes Ewald

Loaders & Plugins

Early adopter of webpack

Sean T. Larkin

Public Relations

Founder of the core team

Kees Kluskens




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

Premium Partners

Other Backers and Sponsors

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.

Angular MoonMail MONEI

Gold Sponsors

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

Silver Sponsors

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

Bronze Sponsors

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


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

Special Thanks to

(In chronological order)

webpack's People


ahabhgk avatar alexander-akait avatar bworline avatar byzyk avatar chenxsan avatar dependabot-preview[bot] avatar dependabot-support avatar dependabot[bot] avatar eugenehlushko avatar hiroppy avatar jamesgeorge007 avatar jsoref avatar mc-zone avatar michael-ciniawsky avatar mohsen1 avatar niieani avatar ooflorent avatar sendilkumarn avatar shubheksha avatar smelukov avatar snitin315 avatar sokra avatar thelarkinn avatar thomastay avatar timse avatar vankop avatar webpack-bot avatar willmendesneto avatar wizardofhogwarts avatar xtuc avatar


 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar


 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

webpack's Issues

Source Maps

Add support for Source Maps.

  • Source Map for minimizing. uglify-js supports this already.
  • Source Maps for packaging the modules together
  • Loaders should be able to return a source map for there generated output

Remove last comma in bundles

It seems like webpack is adding a superfluous comma at the end of the bundle. Although it's not valid JavaScript modern browsers are handling this error decently. But older browsers like IE7 fail.

/******/},     <----

Programmatic webpack interface and uglify.js

Hi sokra,

could the "minimize with uglify.js"-option possibly be missing in the programmatical interface? I see you included it as a flag for the command line call, but it seems to be excluded from the json options object we could pass e.g. in our build.js, or at least it is not documented (and "min": true did not actually make my webpack output ugly ;))

Best regards,

How do I enable debug in jade loader

Hi @sokra

I am unable to see error messages from jade loader.
I assume I need to set debug flag for the loader, how do I do this.
I am working with wpt and dev-server



How to solve amphibious modules properly

This issue is related to the discussion in browserify's repository (browserify/browserify#174). I think webpack brings some interesting ideas but there are some problems left.

First of all I like the way that webpack prefers modules that end on .web.js. This makes it much more easy to swap between nodejs/client modules.

But to illustrate my problem I have to tell something about my plans. I'm currently working on a framework that makes it easy to write an application that runs on the server- and client-side. Therefore an intelligent module packager is very important.

To alleviate the development process I've introduced some naming conventions:

  • Modules that run on the client side end on .client.js
  • Modules that can be used on both sides don't need a postfix
  • Modules that should only run on the server side end on .server.js

I don't want to discuss about the postfixes. But I think it's necessary to have a server-only postfix to prevent the packager from "accidentally" including the server module that may contain sensitive data like passwords. In this case the packager should throw an error like "Hey, you're trying to include a module that you probably don't want to include".

So if I have a module that is amphibious, it's necessary to have three files. One .client.js, one .server.js and one module without postfix, that forwards to .server.js. Thus another module can require(moduleWithoutPostfix) and get the right module according to the current environment.

I don't like the superfluous module that just forwards to the server-module. It even gets more complicated if I have an object that provides attributes for both environments and attributes that are only present in a specific environment.

I really don't know if there is an easy and nice solution, but I wanted to raise the question here because generally I think it's the business of the packager to introduce a simple convention.

Don't wrap loaders in a try/catch-block

If a loader decides to throw an error, I think it's better not to catch the error within webpack. A loader error is critical and should be reported immediately to the the developer.

process.browser and suggestions

Hey @sokra

I just hacked together this little module: (not related to components/components)

I am using the ComponentLoader.available() function to return every component, so I can use them in a user interface.

var ComponentLoader = {
  get: function(name) {
    return require('../components/' + name);
  available: function() {
    var components;
    if (typeof window !== 'undefined') {
      components = require.context('../components').keys();
    } else {
      components = require('fs').readdirSync('./components');
    return {
      return fileName.replace('./', '').replace('.js', '');

module.exports = ComponentLoader;

It works surprisingly well. My main grief points are the following:

  1. Could we get a process.browser or some other utility variable to tell us where our code is running?
  2. I tried requiring webpack/enhanced-require and removed the if statement to run the same components = require.context('../components').keys(); in the browser and the server, but got the following error:


TypeError: Object function () { [native code] } has no method 'keys'
    at Object.ComponentLoader.available (/Users/rainerdreyer/Workspace/PipeDream/src/ComponentLoader.js:9:55)
    at Object.<anonymous> (/Users/rainerdreyer/Workspace/PipeDream/main.js:12:45)
    at Module._compile (module.js:449:26)
    at Object.Module._extensions..js (module.js:467:10)
    at Object..js (/usr/local/lib/node_modules/node-dev/wrapper.js:121:15)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:362:17)
    at require (module.js:378:17)
    at Object.<anonymous> (/usr/local/lib/node_modules/node-dev/wrapper.js:177:1)

So is it possible to use the exact same code on both server and client?


util doesn't work in IE8 and lower

The node module util uses Object.create in the inherit-function. But in IE8 and lower Object.create is not defined. Thus util requires a shim to work properly in these browsers.

Not all JavaScript 1.8.5 features available in Object.create can be emulated but for the purpose of inherit I think this one provided by the MDN will do it.

Relative Path Resolution

Hi sokra,

when I try to build the following setup

project root
|__ lib
|    |__ lib.js
|__ src
|    |__ main.js
|__ build.js

with webpack 0.8.2, where lib.js is some arbitrary library and main.js is as simple as

// main.js
'use strict';

/*global require:true */
require = require('enhanced-require')(module, {
    recursive: true

var Lib = require('../lib/lib.js');

then node build (i.e. basically a clone of your build script) would throw the following error:

ERROR: Cannot find module '../lib/lib.js'
 Error: Error: Module "jshint" not found in context "<project root>\src"
  Error: <project root>\node_modules\webpack\buildin\jshint-webpack-web-loader is not a directory
 @ <project root>\src\main.js (line 8, column 14)

This sample works if lib.js is moved to src and the import in main.js is changed accordingly. By the way, it does not matter if require or enhanced-require is used.

Best regards,

Automatic preferation of .web.js-files doesn't work

I'm not quite sure if I'm doing it wrong, but webpack uses the .js-file instead of the browser-compatible .web.js. This is my test setup:

// Creating bundle via API

var webpack = require("webpack");

webpack(__dirname + "/testEntry.js", {
    output: __dirname + "/testBundle.js"
}, function onWebpackFinished(err, stats) {
    if (err) throw err;
// testEntry.js
var bla = require("./bla.js");
// bla.js
module.exports = "bla";
// bla.web.js
module.exports = "bla.web";
[ { id: 0,
    size: 81,
    filename: '[...]/testEntry.js',
    dirname: undefined,
    fromCache: undefined,
    toCache: undefined,
    reasons: [ [Object] ] },
  { id: 1,
    size: 69,
    filename: '[...]/bla.js',
    dirname: undefined,
    fromCache: undefined,
    toCache: undefined,
    reasons: [ [Object] ] } ]

bla.js and bla.web.js are in the same folder. The error occurs on linux and windows. My current webpack version is 0.4.12. Any idea? :)


As webpack is getting more and more complex....

Somebody wants to do this?

Shorten sourceURLs

Why do all source URLs start with webpack-module:// and than include the absolute file path? I think it would be more readable to just include the path after the module root. E.g. the file /home/jhnns/node/myModule/lib/printHello.js would appear as myModule/lib/printHello.js.

Currently I'm using Chrome to debug my scripts and it's kind of annoying to always resize the scripts panel to see how the actual filename is (because of the webpack-module prefix and the absolute path the string is quite long).

Despite of that, could you add to the readme that the debug option is also available when using the programmatic interface?

Feature: Loaders may provide an own testing method

I would appreciate it if a loader could define an own test-regexp to specify when it's called. This way a developer just has to apply the loader and don't care about the right regexp (or copy it from a readme file).

Align module-object to node's module-object

I think it would be nice to align the module-object as much as possible to node's module object although it's not too important for many modules (because most of the time you don't really need the module-object). could than be the module-id assigned by webpack.

Hot Module Replacement

Reloading the whole page on bundle update is ok, but a far time goal is to replace modules on runtime. (Idea from #25)

It's a far time goal, but it may be good to start discussion early...


  1. Find a syntax.
  2. Check how to implement it in webpack.
  3. Implement it.


  • Don't interrupt other modules
  • Let the developer use it for the whole or only parts of an application
  • Module authors should be able to implement it for their modules. App devs shouldn't need to care.
  • App devs should be able to implement hot module reloading for modules. Even if module authors don't care.
  • It should be usable in production, if you want to. If not it should not make your bundle bigger.
  • It should work with CommonJS and AMD modules.
  • Opt-in for fallback to complete reload.
  • Only transfer updated modules.
  • There should be also a node.js version working with the same syntax


  • Side-Effects in modules. It must be a opt-in feature.
  • Not possible for every module.
  • A module may support it, but the author hasn't opt-in.
  • When to check if new code is availible?
  • Implentation
    • Module/Chunk Ids have to stay
  • ...

webpacking ded/klass


I'm trying to pack and webpack isn't impressed with it:

> webpack node_modules/klass/klass.js klass.packed.js

Hash: 214a480310b53c1a2c79305e8fbc6cf7
Compile Time: 124ms
Chunks: 1
Modules: 1
Modules including duplicates: 1
Modules first chunk: 1
main   klass.packed.js:      893 chars/bytes

 <id>    <size>  <filename>
    0            ./~/klass/klass.js
ERROR: Entry module failed!
 Error: File "/Users/rainerdreyer/Workspace/PipeDream/node_modules/klass/klass.js" parsing failed: TypeError: Cannot call method 'push' of undefined
 @ ./klass.js

But there is no call to push in the klass source code as far as I can see. Could you check why webpack can't handle this? Unfortunately most of my code uses inheritance with klass, so the packaging of everything fails.


Installation instructions / package naming

I haven't found the npm command in your readme to install the webpack so I've entered the github repository name into the npm registry. But there you can only find grunt-webpack, so I was assuming I need grunt to run the module. After some research I've read the npm instructions in your readme by coincidence.

It's very confusing that this module is called modules-webpack on github and you're installing it via npm install webpack. I think the best solution would be to rename the repository to webpack and make the npm installation instructions more obvious. In addition it's very common to have a chapter Installlation right after the short description. Even though this module seems to be designed for all CommonJS-modules, the nodejs use-case will be the most usual.

However, your module is very interesting! :) Currently I'm doing some evaluation to find out if it's useful for my company.

Next steps for 0.9

Webpack become bigger than initially excepted (like many other growing projects ;) ), and the current design is not longer suitable for planed features...

So a important step must be a big refactoring to a better design!

This will also result in a API change, because the current API is weird in some aspects and many options are not logical named/ordered/categorized. (I'll offer a deprecated backward compatible API, will warnings as hints for migration)

It's cool that we have a good bunch of tests so that we can test the new design. I'll to add only a few new features with 0.9, but I'll prepare the design for source maps and hot code replacement. It would be good if we could share more code with enhanced-require.

I'll move some stuff out of enhanced-resolve to keep this library more reuseable.

This (API) stuff is weird and will be changed:

  • Why is the loaders option in the resolve object?
  • The postprocess is weird. OO-Solution: Extend a factory class.
  • Why are so many options in the options object? Make it more structured.

and this (internal) stuff:

  • The parsing is not (good) extentable, not reusable and bad code.
  • Extending the output source is weird
  • Complex inter-module optimizing is difficult

I'll post more stuff on progress in the issue, so keep watching

Remove real module paths when not in debug mode

When I'm not in debug mode the real module paths should not be included within require().

require(/* !/home/jhnns/webpack-test/app/pages/Main/MainPage.class.js */7);



Common codebase for webpack and enhanced-require

They should share more code, but this should be extracted into another module. webpack should not depend von enhanced-require.

Secondary: if you use webpack in an enhanced-require context it should execute modules (val-loader) in this context.

Error while installing webpack 0.6.0 via npm

I just wanted to install recent webpack version, but I got the following error:

Error: No compatible version found: webpack@'>=0.6.0- <0.7.0-'
npm ERR! Valid install targets:
npm ERR! ["0.1.0","0.1.1","0.1.2","0.1.3","0.1.4","0.1.5","0.1.6","0.2.0","0.2.1","0.2.2","0.2.3","0.2.4","0.2.6","0.2.7","0.2.8","0.3.0","0.3.1","0.3.2","0.3.3","0.3.4","0.3.6","0.3.7","0.3.8","0.3.9","0.3.10","0.3.11","0.3.12","0.3.13","0.3.14","0.3.15","0.3.16","0.3.17","0.3.18","0.3.19","0.3.20","0.4.0","0.4.1","0.4.2","0.4.3","0.4.4","0.4.5","0.4.6","0.4.7","0.4.8","0.4.9","0.4.10","0.4.11","0.4.12","0.4.13","0.4.14","0.4.15","0.4.16","0.4.17","0.4.18","0.4.19","0.4.20","0.4.21","0.4.23","0.4.24","0.4.25","0.5.0","0.5.1","0.5.2","0.5.3","0.5.4","0.5.5","0.5.6","0.5.7","0.5.8","0.5.10"]

I'm running node 0.8.7 and I've tested it also with 0.8.6.

Get bundle as a string with programmatically usage with 0.6.x

We're using for alamid's client tests nof5.
nof5 is basically a server which is able to use different bundlers, e.g. webpack, to bundle and serve client tests. One advantage of nof5 is that there is no need to write any tmp-file for the tests. So you won't have any problems with permissions.
So nof5 expects from the bundlers to be able to return a bundle as a string.
This is how webpack is implemented as bundler for nof5: WebpackBundler.
I wanted to updated the dependecy to webpack to version 0.6.x, but webpack isn't return a string any more.

Is there any possibility to get the bundle as string?

__filename and __dirname

I'm not quite sure how to handle these two variables. You haven't really documented this issue but after some testing I found out that you always pass ./index.js as filename and ./ as dirname.

I really like your approach of removing all the path resolution logic but I think for compatibility reasons you should also provide a file- and dirname (if requested). To accomplish this without leaking the real absolute path you could adopt the approach of browserify or webmake: All paths start from the top module root, e.g:

  • /jhnns/home/nodejs/myApp/app/someModule.js becomes /app/someModule.js
  • /jhnns/home/nodejs/myApp/node_modules/someModule/lib/someOtherModule.js becomes /node_modules/someModule/lib/someOtherModule.js
    and so on

Harmony modules

They should be packaged too.

import "jquery";
// => var __x__ = require(1), $ = __x__.$, jQuery = __x__.jQuery;

import $ from "jquery";
// => var __x__ = require(1), $ = __x__.$;

import { encrypt, decrypt } from "crypto"
// => var __x__ = require(2), encrypt = __x__.encrypt, decrypt = __x__.decrypt;

import { encrypt as enc } from "crypto"
// => var __x__ = require(2), enc = __x__.encrypt;

module "security" { }
// => var __WEBPACK_LOCAL_MODULE_1__ = {}; (function(exports) { }.call(this, __WEBPACK_LOCAL_MODULE_1__));

module crypto from "crypto";
// => var crypto = require(2);

export var document = 1234;
// => var document = 1234; exports.document = document;

export function parse() { };
// => function parse() { }; exports.parse = parse;

export default = 42;
// => module.exports = 42;
// => __WEBPACK_LOCAL_MODULE_1__ = 42;

export * from "crypto";
// => var __x__ = require(2); for(var name in __x__) exports[name] = __x__[name];

export { encrypt, decrypt as dec };
// => exports.encrypt = encrypt; exports.dec = decrypt;

Miss-understood 'options' part

I totally lost with 'options' part in README and cant find any examples.
At first -

"You can also save this options object in a JSON file and use it with the shell command"

but next (at README) code are invalid JSON (use function and e.t.c). I got error on copy-paste.

So, what I do - Iam write small (dual-faced - node and browser) widget and use in it lodash. Its big module and I need to load it in browser separately, with <script src="vendor/lodash.min.js"></script>. In my code I use _ = @_ ? require 'lodash'`

How I can told to webpack to exclude lodash from package?

webpack error when requiring jam jquery

Hi @sokra

When I try to require('jquery'), which is a jam module installed under web_modules, I always get the following message:

- Serving static content.
- dev-server on port 8081.
> Open http://localhost:8081/ in your browser.

Error: watch ENOENT
    at errnoException (fs.js:806:11)
    at FSWatcher.start (fs.js:837:11)
    at (fs.js:861:11)
    at module.exports (/Users/karlvanrompaey/Documents/apps/experiments/webpack/jam-app/node_modules/webpack/lib/webpack.js:223:23)
    at Array.forEach (native)
    at EventEmitter.<anonymous> (/Users/karlvanrompaey/Documents/apps/experiments/webpack/jam-app/node_modules/webpack/lib/webpack.js:222:19)
    at EventEmitter.emit (events.js:123:20)
    at writingFinished (/Users/karlvanrompaey/Documents/apps/experiments/webpack/jam-app/node_modules/webpack/lib/webpack.js:522:19)
    at /Users/karlvanrompaey/Documents/apps/experiments/webpack/jam-app/node_modules/webpack/lib/webpack.js:379:30
    at buildTree (/Users/karlvanrompaey/Documents/apps/experiments/webpack/jam-app/node_modules/webpack/lib/buildDeps.js:103:3)
Hash: 4732db73d220259503822d5a079cf898
Compile Time: 677ms
Chunks: 1
Modules: 6
Modules including duplicates: 6
Modules first chunk: 6

 <id>    <size>  <filename>
    0        11  ./_template/entry.js [caching]
    1        45  ./app/app.js [caching]
    2    259828  ./app/web_modules/jquery/jquery.js [caching]
    3       533  (webpack)/buildin/__webpack_amd_define.js [caching]
    4       428  (webpack)/buildin/__webpack_amd_require.js [caching]
    5        24  (webpack)/buildin/__webpack_options_amd.loader.js!(webpack)/buildin/__webpack_options_amd.loader.js [caching]
webpack: bundle is now VALID.

Jquery seems to be correctly bundled in the app and the server also works, but, I always get an error message related to watch and I am not sure whether it is save to ignore this message !!! For sure the message should not be there :-)

My setup as as follows:

wpt create jam-app
cd jam-app
npm install

Now add jam-dependencies to package.json

    "jam": {
        "packageDir": "app/web_modules",
        "baseUrl": "app",
        "dependencies": {
            "jquery": "1.8.0",
            "bootstrap": "2.1.1-jam.1"

Then run:

jam install

And now the error messages start to appear

Windows \r\n

Hi @sokra

Nice work on this. :)

One minor issue that is easy to fix: When I run webpack the hashbang #!/usr/bin/env node fails, since your editor saved it with \r\n.

The actual error: env: node\r: No such file or directory

If I open it with my editor, set the line endings to Unix and save it, it works fine. :) Please set your editor to use Unix line endings, too.

Apparently this can also be set with git: evocateur/yui-configger@ecdc0a1 But I think you'll still have to re-commit the bin/webpack file manually.

Thanks a lot!

Problems with require.cache

Since version 0.5.10 webpack requires every loader in a new "context" by removing all modules from cache and readding them after the loader has been executed.

I think it's very delicate to mess around with require.cache because this can lead to totally unexpected behavior. Is there are an important reason why you've introduced this?

Currently I have to lock webpack at version 0.5.8 because it breaks my code.

Performance problems

I think there are some serious performance problems with webpack. Currently we're generating first bundles with alamid. The basic bundle (without application logic) contains about 50-60 modules. This is fine because we like modularity and prefer writing many short modules than a single long one.

Right now webpack takes about 2 secs (!) to compile the file. This is way too long. I don't know if you have any performance tests yet, but I think it is a good idea to spend some time on improving it. Maybe you can use flame graphs for it.

We (at alamid) surely haven't done everything right and could reduce some file system calls. But I think the main problem lies in webpack.

One performance gain could be achieved by replacing all asynchronous file system tasks to synchronous ones. Since you're not bundling for every HTTP-request in production it's a good idea to make it synchronous.

Loading of modules with main = path (./lib/) instead of main = path/file (./lib/index.js)

I had an issue today with bundling the validator node-module. I checked the package.json and the problem is how the main-file is referenced:

"main"          : "./lib",

I changed it locally to lib/index.js and it works.
I think it's valid to reference main via path instead of a full-file-path, so webpack should resolve it the same way node does it.

And for testing with the validator module: Bundling the validator module doesn't work completely because it's referencing the native node-module "net". It removed this dep and it works completely.

Packaging issues after node-jquery update

Hi sokra,

I just got involved in another JS project and decided to stick with the tools I am familiar with, i.e. webpack, among others. Unfortunately when I created a new project I ran into some strange errors I could not explain. I ended up cleaning my old project of all generated content (npm & jam modules) and updated the dependencies. Now with node-jquery 1.8.3 my old project won't build at all. When I try to webpack the following minimal example

// main.js
'use strict';

/*global require:true */
require = require('enhanced-require')(module, {
    recursive: true

var $ = require('jquery');

I get the following warnings:

WARNING: A file in context was excluded because of error: Error: File "<project root>\node_modules\jquery\node_mod
ules\jsdom\lib\jsdom\level1\core.js" parsing failed: Error: Line 418: Unexpected token )
WARNING: A file in context was excluded because of error: Error: File "<project root>\node_modules\jquery\node_mod
ules\jsdom\lib\jsdom\level2\html.js" parsing failed: Error: Line 446: Unexpected token )
WARNING: Cannot find module 'node-htmlparser/lib/node-htmlparser'
 Error: Module "node-htmlparser/lib/node-htmlparser" not found in context "<project root>\node_modules\jquery\node
  Error: <project root>\node_modules\webpack\buildin\node-htmlparser\lib\node-htmlparser is not a directory
 @ <project root>\node_modules\jquery\node_modules\jsdom\lib\jsdom\browser\index.js (line 336, column 24)
WARNING: Cannot find module 'tls'
 Error: Module "tls" not found in context "<project root>\node_modules\jquery\node_modules\jsdom\node_modules\requ
  Error: Non of this files exists: <project root>\node_modules\webpack\buildin\tls-webpack, <project root>
\node_modules\webpack\buildin\tls-webpack.webpack.js, <project root>
\node_modules\webpack\buildin\tls-webpack.web.js, <project root>\node_modules\webpack\buildin\tls-webpack.js
 @ <project root>\node_modules\jquery\node_modules\jsdom\node_modules\request\main.js (line 44, column 8)
WARNING: A file in context was excluded because of error: Error: File "<project root>\node_modules\jquery\node_mod
ules\contextify\node_modules\bindings\" parsing failed: Error: Line 2: Unexpected token ===
WARNING: Cannot find module 'https'
 Error: Module "https" not found in context "<project root>\node_modules\jquery\node_modules\jsdom\node_modules\re
  Error: Non of this files exists: <project root>\node_modules\webpack\buildin\https, <project root>
\node_modules\webpack\buildin\https.webpack.js, <project root>\node_module
s\webpack\buildin\https.web.js, <project root>\node_modules\webpack\buildin\https.js
 @ <project root>\node_modules\jquery\node_modules\jsdom\node_modules\request\main.js (line 40, column 10)

plus a ton of errors like:

ERROR: Cannot find module '../../../lib/numeric'
 Error: Error: Module "jshint" not found in context "<project root>\src\client\numeric"
  Error: <project root>\node_modules\webpack\buildin\jshint-webpack-loader is not a directory
 @ <project root>\src\client\numeric\LinearSolver.js (line 7, column 36)
ERROR: Cannot find module '../../../../lib/spin'
 Error: Error: Module "jshint" not found in context "<project root>\src\client\view\recipe"
  Error: <project root>\node_modules\webpack\buildin\jshint-webpack-loader is not a directory
 @ <project root>\src\client\view\recipe\RecipeListView.js (line 9, column 11)
ERROR: Cannot find module 'fs'
 Error: Module "fs" not found in context "<project root>\node_modules\jquery\node_modules\xmlhttprequest\lib"
  Error: <project root>\node_modules\webpack\buildin\fs is not a directory
 @ <project root>\node_modules\jquery\node_modules\xmlhttprequest\lib\XMLHttpRequest.js (line 16, column 9)

For this example I npm installed the latest versions of jquery, webpack, enhanced-require (node_modules) and jam installed jquery (web_modules). Do you happen to have an idea of what went wrong here?


notes to self:

  • doc rails-style root app with ./components
  • doc nicer modular SPA
  • doc modular MPA

Add multiple entry points to one bundle

I want to use webpack to bundle unit tests in the test-folder. Therefore I want to search the test-folder for js-files and add these files to the bundle created by webpack. Is it possible to add multiple entry points like .addEntry() in browserify?

Node-module "path" throws an exception when context is missing

The node-module path uses process.cwd() several times, but process.cwd() doesn't seem to be a function in the browser when I haven't passed a context via the options. Imho webpack should always assume a context when no one has been specified, maybe process.cwd().

project cluttering

I'm not sure what the best solution for this is, but IDEs like Aptana Studio have a file indexer, installing a lot of modules slows down the build. Pretty annoying if you have to wait before you can do something else.
That's just partially webpack's problem, but it could still use some refinement.

webpacks tutorial tells you to install webpack locally and globally. Shouldn't it be just one of those? Would be nice if the user could choose between installing his dev environment separately (global) or bound to the project. The latter makes more sense at the moment, as webpack introduces some specific features, which binds one's project to webpack anyways.

Still, I would prefer a complete global install of webpack and it's modules.
For comparison, grunt installs globally, while it's plugins are installed locally. That at least, keeps that huge chunk of grunt main code out of the project, while plugins are small. That is, I think, because you can't put any modules in your package.json to be installed globally.

To sum up: I would like to see webpack being more loosely coupled to my project and satisfied with a global install. One build.json or webpack.js in the projects main should be sufficient.

Backbone packaging issue

Hi sokra,

yesterday I tried adding Backbone to one of my projects and ran into some issue I do not fully understand. My setup is webpack 0.7.8, Backbone 0.9.2 (both in web_modules and node_modules, installed locally via jam or npm respectively) and enhanced-require 0.4.0-beta3 running on node 0.8.11.

When I try to webpack a file with the following contents

'use strict';
require = require('enhanced-require')(module, {
    recursive: true

var Backbone = require('backbone');


I get the following warning-error-mix:

<WARN> Cannot find module 'exports'
 Error: Module "exports" not found in context "<project path>\web_modules\backbone"
  Error: non in any path of paths
 @ <project path>\web_modules\backbone\backbone.js (line 15, column 36) Use --force to continue. </WARN>

Since it is a mere warning, I could force the build though, giving me about what I expected in the console.log line. Nevertheless, did you ever face that warning? How can I get rid of it?

Interestingly enough, when I remove the jam version of Backbone, webpack runs without complaining about anything. Then again, there is only the Backbone namespace in the console.log output, i.e. it containts neither View, nor Model, nor any other object or function.

Best regards,

Harmonize with components

I really like TJ's approach of components. I haven't tried it yet but it would be cool if webpack was able to consume those components without hassle.

It's a good idea to write small components that are independent from big libraries or specific bundlers. In an application I may use webpack as a bundler because it has several useful features. But I don't want to write a small component that requires to use webpack as a bundler.

What do you think?

We could join the components-movement if webpack is able to consume components. Maybe TJ adds webpack as a recommendation.

Problems requiring EventEmitter2 in browser

I want to use EventEmitter2 from hij1nx. While in node context it works in browser context it is undefined.
Probably the last line of the module breaks webpack

;!function(exports, undefined) {

 // ...

}(typeof process !== 'undefined' && typeof process.title !== 'undefined' && typeof exports !== 'undefined' ? exports : window);

Do you have any idea or solution how to solve this problem?

Another request for `require.context(./somedir)`

Hi @sokra

With a components directory that looks like this:


And my ComponentLoader that requires it like this:

var ComponentLoader = {
  get: function(name) {
    return require('../components/' + name);
  available: function() {
    var components = require.context('../components').keys();

    return {
      return fileName.replace('./', '').replace('.js', '');

It would be super cool if the context included only


in the browser, and


in node.

Currently the context includes all files in the browser and node. (And webpack throws a little error, because B.js includes net.)

Improve bundle error messages

webpack's current error messages are not good readable. For example:

     Error: the string "Cannot find module 'metaclass/lib/helpers/is.js'
 Error: Module "metaclass/lib/helpers/is.js" not found in context "/media/sf_dev/nodeclass/lib"
  Error: non in any path of paths
 @ /media/sf_dev/nodeclass/lib/main.web.js (line 6, column 13)" was thrown, throw an Error :)

There seem to be several try-catch-blocks involved. But in this case it would be better if there is only one error, saying that module A required in module B can't be found in directory C.

3 error messages nested in one string are hard to understand.

Add documentation on preLoaders and postLoaders

In the last issue you pointed out to use a postLoader like this:

module.exports = function(source) {
   // do something
  return source;

Is the signature of pre- and postLoaders documented anywhere?

Reduce dependencies according to semver

I haven't tried it yet, but does webpack reduce dependencies according to the package version? So if a module with the same version number is included from two different directories, e.g. A/node_modules/[email protected] and B/node_modules/[email protected], webpack should include it only once into the bundle.

It would be even better if webpack includes only one version as long as the major version of those two dependencies don't differ. So if myLib1 depends on [email protected] and myLib2 depends on [email protected], webpack should include only [email protected] because - according to semver - it won't break myLib2. Maybe this should be opt-in as it is potential risky.

In any case webpack should log a warning if two versions of the same module are included.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.