Exploring Webpack

Webpack, can be used to split code into an on demand loaded chunk.It's quite an interesting feature. You should define split points for this to work.

One way to define a split point is to use require.ensure, a webpack specific API. require.ensure will ensure spliting modules in its first arguments and modules it reference in a new chunk(not always, in fact), but won't evaluate like require do, just scheduled to evaluate later.

Loads raw content of a file (as utf-8).

the dogs.js file

console.log('half dog')

// raw-loader
var dogs = require('raw!./dogs.js')

When checking bundle.js, except the webpack runtime we have seen before, you can see it export dogs.js's raw content in the generated module function.

/* 2 */
/***/ function(module, exports) {

    module.exports = "console.log('half dog')"

/***/ },

How raw loader achieve this? lets look at what raw-loader looks like:

module.exports = function(content) {
    this.cacheable && this.cacheable();
    this.value = content;  // I can't figure out why set loader context with previous content
    return "module.exports = " + JSON.stringify(content);
}

A plain javascript function who accept raw content of a file:

1. mark the loader cacheable
2. set the value in loader context. I dont know what it for, despite of the confusing api docs.
3. return the module body, which exports such raw content.

Loads file as JSON

// json loader
var cats = require('json!./cats.json');

cats.json

["dave","henry","reverland"]

bundle.js looks like below:

/* 1 */
/***/ function(module, exports) {

    module.exports = [
        "dave",
        "henry",
        "reverland"
    ];

/***/ },

json-loader:

module.exports = function(source) {
    this.cacheable && this.cacheable();
    var value = typeof source === "string" ? JSON.parse(source) : source;
    this.value = [value];
    return "module.exports = " + JSON.stringify(value, undefined, "\t") + ";";
}

Obvious, however, I still don't know what this.value for.

Executes code as module and consider exports as JavaScript code

dogs.js, a module which exports js code.

var code = 'var dogs = \'a\''
module.exports = code

app.js, the entry point.

// val-loader
var dogs = require('val!./dogs.js')

bundle.js

/* 3 */
/***/ function(module, exports) {

    var dogs = 'a'

/***/ },

val-loader

var loaderUtils = require("loader-utils");
module.exports = function(content) {
    var query = loaderUtils.parseQuery(this.query);
    if(query.cacheable && this.cacheable)
        this.cacheable();
    if(this.inputValue) {
        return null, this.inputValue;
    } else {
        return this.exec(content, this.resource);
    }
}

neat(but what does return null, this.inputValue mean?)

I still can not figure out how cacheable works

cats.json is same as above.

app.js

// file-loader
var cats = require('file?name=new_cats.json!./cats.json')

Bundle it, a new file emitted by the loader.

┌─(~/work/webpack-learning/5)───────────(reverland@reverland-R478-R429:pts/1)─┐
└─(00:19:24)──> webpack app.js bundle.js --module-bind 'png=file-loader'
Hash: cc125205509143b0e940
Version: webpack 1.13.1
Time: 905ms
                                Asset      Size  Chunks             Chunk Names
                        new_cats.json  29 bytes          [emitted]  
...

bundle.js

/* 4 */
/***/ function(module, exports, __webpack_require__) {

    module.exports = __webpack_require__.p + "new_cats.json";

/***/ },

file-loader

var loaderUtils = require("loader-utils");

module.exports = function(content) {
    this.cacheable && this.cacheable();
    if(!this.emitFile) throw new Error("emitFile is required from module system");

    var query = loaderUtils.parseQuery(this.query);
    var configKey = query.config || "fileLoader";
    var options = this.options[configKey] || {};

    var config = {
        publicPath: false,
        name: "[hash].[ext]"
    };

    // options takes precedence over config
    Object.keys(options).forEach(function(attr) {
        config[attr] = options[attr];
    });

    // query takes precedence over config and options
    Object.keys(query).forEach(function(attr) {
        config[attr] = query[attr];
    });

    var url = loaderUtils.interpolateName(this, config.name, {
        context: config.context || this.options.context,
        content: content,
        regExp: config.regExp
    });

    var publicPath = "__webpack_public_path__ + " + JSON.stringify(url);

    if (config.publicPath) {
        // support functions as publicPath to generate them dynamically
        publicPath = JSON.stringify(
                typeof config.publicPath === "function" 
                 ? config.publicPath(url) 
                 : config.publicPath + url
        );
    }

    if (query.emitFile === undefined || query.emitFile) {
        this.emitFile(url, content);
    }

    return "module.exports = " + publicPath + ";";
}
module.exports.raw = true;

According to the option it parsed, it emit the file and export the path.

It's a raw loader, for file content need to be Buffer instead of String.

By the way, it talked about publicPath, that's where you'd like your assets being served.

The url loader works like the file loader, but can return a Data Url if the file is smaller than a limit.

cats.json is the same as above.

app.js

// url-loader
var cats = require('url!./cats.json')
var cats = require('url?limit=1!./cats.json')

bundle.js

/* 5 */
/***/ function(module, exports) {

    module.exports = "data:application/json;base64,WyJkYXZlIiwiaGVucnkiLCJyZXZlcmxhbmQiXQo="

/***/ },
/* 6 */
/***/ function(module, exports, __webpack_require__) {

    module.exports = __webpack_require__.p + "480cea2cf47df1df86c2f9540b86bc8f.json";

/***/ },

url-loader

var loaderUtils = require("loader-utils");
var mime = require("mime");
module.exports = function(content) {
    this.cacheable && this.cacheable();
    var query = loaderUtils.parseQuery(this.query);
    var limit = (this.options && this.options.url && this.options.url.dataUrlLimit) || 0;
    if(query.limit) {
        limit = parseInt(query.limit, 10);
    }
    var mimetype = query.mimetype || query.minetype || mime.lookup(this.resourcePath);
    if(limit <= 0 || content.length < limit) {
        return "module.exports = " + JSON.stringify("data:" + (mimetype ? mimetype + ";" : "") + "base64," + content.toString("base64"));
    } else {
        var fileLoader = require("file-loader");
        return fileLoader.call(this, content);
    }
}
module.exports.raw = true;

Yeah,

• if limit query is not present anywhere, it is zero, then export the files dataURL.
• or it will decide whether export with limit. If file size is below limit, export dataURL, else export path like file-loader.

Loads css file with resolved imports and returns css code

css-loader is complex, I won't show the source code of the loader, but we can check what it generated to have a feeling of whats happening.

app.css

@import './b.css';
body {
  color: red;
  background-image: url('./background.png');
}

h1 {
  color: gold;
  text-shadow: 0 0 3px black;
}

b.css

h1 {
  font-size: 3em;
}

app.js

// css-loader
var css = require('css!./app.css')

bundle.js

//...
    // css-loader
    var css = __webpack_require__(7)
//...
/* 7 */
/***/ function(module, exports, __webpack_require__) {

    exports = module.exports = __webpack_require__(8)();
    // imports
    exports.i(__webpack_require__(9), "");

    // module
    exports.push([module.id, "body {\n  color: red;\n  background-image: url(" + __webpack_require__(10) + ");\n}\n\nh1 {\n  color: gold;\n  text-shadow: 0 0 3px black;\n}\n", ""]);

    // exports


/***/ },
/* 8 */
/***/ function(module, exports) {

    /*
        MIT License http://www.opensource.org/licenses/mit-license.php
        Author Tobias Koppers @sokra
    */
    // css base code, injected by the css-loader
    module.exports = function() {
        var list = [];

        // return the list of modules as css string
        list.toString = function toString() {
            var result = [];
            for(var i = 0; i < this.length; i++) {
                var item = this[i];
                if(item[2]) {
                    result.push("@media " + item[2] + "{" + item[1] + "}");
                } else {
                    result.push(item[1]);
                }
            }
            return result.join("");
        };

        // import a list of modules into the list
        list.i = function(modules, mediaQuery) {
            if(typeof modules === "string")
                modules = [[null, modules, ""]];
            var alreadyImportedModules = {};
            for(var i = 0; i < this.length; i++) {
                var id = this[i][0];
                if(typeof id === "number")
                    alreadyImportedModules[id] = true;
            }
            for(i = 0; i < modules.length; i++) {
                var item = modules[i];
                // skip already imported module
                // this implementation is not 100% perfect for weird media query combinations
                //  when a module is imported multiple times with different media queries.
                //  I hope this will never occur (Hey this way we have smaller bundles)
                if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) {
                    if(mediaQuery && !item[2]) {
                        item[2] = mediaQuery;
                    } else if(mediaQuery) {
                        item[2] = "(" + item[2] + ") and (" + mediaQuery + ")";
                    }
                    list.push(item);
                }
            }
        };
        return list;
    };


/***/ },
/* 9 */
/***/ function(module, exports, __webpack_require__) {

    exports = module.exports = __webpack_require__(8)();
    // imports


    // module
    exports.push([module.id, "h1 {\n  font-size: 3em;\n}\n", ""]);

    // exports


/***/ },
/* 10 */
/***/ function(module, exports, __webpack_require__) {

    module.exports = __webpack_require__.p + "8fd2362368edec47b25aeb7218d3f5ba.png";

/***/ },

As we can see, css-loader should get all dependencies working well:

1. generate modules for @import css.
2. generate modules for url() with url-loader/file-loader.
3. correctly handle mediaquery

The bundle.js shows that it generate a runtime module which return a factory, every css module use the factory to construct a list and push its dependencies into the list. finally, export the list full of its module dependencies.

In this way, css loader handle all of the css modules correctly and export their dependencies in javascript.

Cool~

But css-loader is more than this, you may check their docs and source codes your self to learn more.

How to insert the generated css code into DOM to acturelly work?

you need a style-loader to do it.

Add exports of a module as style to DOM

app.css is as above

app.js

// style-loader
require('style!raw!./app.css')

bundle.js

/***/ },
/* 11 */
/***/ function(module, exports, __webpack_require__) {

    // style-loader: Adds some css to the DOM by adding a <style> tag

    // load the styles
    var content = __webpack_require__(12);
    if(typeof content === 'string') content = [[module.id, content, '']];
    // add the styles to the DOM
    var update = __webpack_require__(13)(content, {});
    if(content.locals) module.exports = content.locals;
    // Hot Module Replacement
  // ...
    }

/***/ },
/* 12 */
/***/ function(module, exports) {
  // css content to insert
    module.exports = "@import './b.css';\nbody {\n  color: red;\n  background-image: url('./background.png');\n}\n\nh1 {\n  color: gold;\n  text-shadow: 0 0 3px black;\n}\n"

/***/ },
/* 13 */
/***/ function(module, exports, __webpack_require__) {
      // module to manipulate dom
      // ...
/***/ }
/******/ ]);

it looks obviously how it works. but lets check the source code of style-loader

var loaderUtils = require("loader-utils"),
    path = require("path");
module.exports = function() {};
module.exports.pitch = function(remainingRequest) {
    if(this.cacheable) this.cacheable();
    var query = loaderUtils.parseQuery(this.query);
    return [
        "// style-loader: Adds some css to the DOM by adding a <style> tag",
        "",
        "// load the styles",
        "var content = require(" + loaderUtils.stringifyRequest(this, "!!" + remainingRequest) + ");",
        "if(typeof content === 'string') content = [[module.id, content, '']];",
        "// add the styles to the DOM",
        "var update = require(" + loaderUtils.stringifyRequest(this, "!" + path.join(__dirname, "addStyles.js")) + ")(content, " + JSON.stringify(query) + ");",
        "if(content.locals) module.exports = content.locals;",
        "// Hot Module Replacement",
        // ...
        "}"
    ].join("\n");
};

Its a pitch loader. What does it mean?

The pitch method on the loaders is called from left to right before the loaders are called. If a loader delivers a result in the pitch method the process turns around and skips the remaining loaders, continuing with the calls to the more left loaders.

sokra said…

It's like the two phases of event bubbling...

a!b!c!resource

    pitch a
        pitch b
            pitch c
                read file resource (adds resource to dependencies)
            run c
        run b
    run a

When a loader return something in the pitch phase the process continues with the normal phase of the next loader... Example:

    pitch a
        pitch b (returns something)
    run a

You can do something before the resource being really read and evaluated. In fact, style-loader interupt the load process and restart the load process in its loader function, after loading the css code, it manipulate the dom(insert. check, replace, etc) to make the style acturally work.

Imports stuff to the module

this transform app.js

javascript // import-loader require('imports?this=>new_this,cats./cats.js!./dogs.js')=

and cats.js

javascript var cats = ['meow', 'nyaa', 'miao'] module.exports = cats

and dogs.js

javascript var code = 'var dogs = \'a\'' module.exports = code

into bundle.js

```javascript * 14 / /** function(module, exports, webpack\<sub>require</sub>) {

/*** IMPORTS FROM imports-loader ***/
(function() {
var cats = __webpack_require__(15);

var code = 'var dogs = \'a\''
module.exports = code

}.call(new_this));

*/ }, / 15 / /* function(module, exports) {

var cats = ['meow', 'nyaa', 'miao']
module.exports = cats

*/ } /**** ]); ```

imports-loader

var loaderUtils = require("loader-utils");
var SourceNode = require("source-map").SourceNode;
var SourceMapConsumer = require("source-map").SourceMapConsumer;
var HEADER = "/*** IMPORTS FROM imports-loader ***/\n";
module.exports = function(content, sourceMap) {
    if(this.cacheable) this.cacheable();
    var query = loaderUtils.parseQuery(this.query);
    var imports = [];
    var postfixes = [];
    Object.keys(query).forEach(function(name) {
        var value;
        if(typeof query[name] == "string" && query[name].substr(0, 1) == ">") {
            value = query[name].substr(1);
        } else {
            var mod = name;
            if(typeof query[name] === "string") {
                mod = query[name];
            }
            value = "require(" + JSON.stringify(mod) + ")";
        }
        if(name === "this") {
            imports.push("(function() {");
            postfixes.unshift("}.call(" + value + "));");
        } else {
            imports.push("var " + name + " = " + value + ";");
        }
    });
    var prefix = HEADER + imports.join("\n") + "\n\n";
    var postfix = "\n" + postfixes.join("\n");
    if(sourceMap) {
    // generate source map
    // ...
    }
    return prefix + content + postfix;
}

So, with imports-loader, you can

1. Pass query 'name=value' to add var name = require(value) before source content
2. Pass query 'name=>value' to add var name = value before source content
3. Pass query 'this=>value' to wrap source content in a function and bind this to this value.

Quite cool~

Exports stuff from the module

dogs.js as shown above.

app.js

// exports-loader
require('exports?kitten=cats,dogs!./dogs.js')

bundle.js

/* 16 */
/***/ function(module, exports) {

    var code = 'var dogs = \'a\''
    module.exports = code


    /*** EXPORTS FROM exports-loader ***/
    exports["kitten"] = (cats);
    exports["dogs"] = (dogs);

/***/ }
/******/ ]);

exports-loader

var loaderUtils = require("loader-utils");
var SourceNode = require("source-map").SourceNode;
var SourceMapConsumer = require("source-map").SourceMapConsumer;
var FOOTER = "/*** EXPORTS FROM exports-loader ***/\n";
module.exports = function(content, sourceMap) {
    if(this.cacheable) this.cacheable();
    var query = loaderUtils.parseQuery(this.query);
    var exports = [];
    var keys = Object.keys(query);
    if(keys.length == 1 && typeof query[keys[0]] == "boolean") {
        exports.push("module.exports = " + keys[0] + ";");
    } else {
        keys.forEach(function(name) {
            var mod = name;
            if(typeof query[name] == "string") {
                mod = query[name];
            }
            exports.push("exports[" + JSON.stringify(name) + "] = (" + mod + ");");
        });
    }
    if(sourceMap) {
    // emit source map
    // ...
    }
    return content + "\n\n" + FOOTER + exports.join("\n");
}

So, clearly, with exports-loader you can:

1. Pass name query to append exports['name'] = name to source content
2. Pass name=value query to append exports['value'] = name to source content

Exports stuff from the module

qpp.js

// exports-loader
require('expose?dogs.name.value!./dogs.js')

bundle.js

/* 17 */
/***/ function(module, exports, __webpack_require__) {

    /* WEBPACK VAR INJECTION */(function(global) {if(!global["dogs"]) global["dogs"] = {};
    if(!global["dogs"]["name"]) global["dogs"]["name"] = {};
    module.exports = global["dogs"]["name"]["value"] = __webpack_require__(18);
    /* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }())))

/***/ },
/* 18 */
/***/ function(module, exports) {

    var code = 'var dogs = \'a\''
    module.exports = code


/***/ }
/******/ ]);

expose-loader

function accesorString(value) {
    var childProperties = value.split(".");
    var length = childProperties.length;
    var propertyString = "global";
    var result = "";

    for(var i = 0; i < length; i++) {
        if(i > 0)
            result += "if(!" + propertyString + ") " + propertyString + " = {};\n";
        propertyString += "[" + JSON.stringify(childProperties[i]) + "]";
    }

    result += "module.exports = " + propertyString;
    return result;
}

module.exports = function() {};
module.exports.pitch = function(remainingRequest) {
    this.cacheable && this.cacheable();
    if(!this.query) throw new Error("query parameter is missing");
    return accesorString(this.query.substr(1)) + " = " +
        "require(" + JSON.stringify("-!" + remainingRequest) + ");";
};

Yes, if you pass expose-loader with query a.b.c, it will expose the module's exports to global.a.b.c.

By using a pitch loader, it can interupt the process if no query.

Executes a JavaScript file once in global context (like in script tag), requires are not parsed.

app.js

bundle.js

/* 19 */
/***/ function(module, exports, __webpack_require__) {

    __webpack_require__(20)(__webpack_require__(21))

/***/ },
/* 20 */
/***/ function(module, exports) {

    /*
        MIT License http://www.opensource.org/licenses/mit-license.php
        Author Tobias Koppers @sokra
    */
    module.exports = function(src) {
        if (typeof execScript !== "undefined")
            execScript(src);
        else
            eval.call(null, src);
    }


/***/ },
/* 21 */
/***/ function(module, exports) {

    module.exports = "var code = 'var dogs = \\'a\\''\nmodule.exports = code\n"

/***/ }
/******/ ]);

In fact, it just eval() the source content in global context.

script-loader

var path = require("path");

var addScript = function(src) {
  if (typeof execScript !== "undefined")
        execScript(src);
    else
        eval.call(null, src);
}

module.exports = function() {};
module.exports.pitch = function(remainingRequest) {
    this.cacheable && this.cacheable();
    return "require(" + JSON.stringify("!!" + path.join(__dirname, "addScript.js")) + ")"+
            "(require(" +
            JSON.stringify("!!" + require.resolve("raw-loader") + "!" + remainingRequest) + ")" +
                (this.debug ?
                    "+" +
                        JSON.stringify(
                            "\n\n// SCRIPT-LOADER FOOTER\n//# sourceURL=script:///" +
                                encodeURI(remainingRequest.replace(/^!/, "")).replace(/%5C|%2F/g, "/").replace(/\?/, "%3F").replace(/^\//, "")
                        ) :
                    "") +
            ")";
};

Awesome!

In fact, there are more things a loader can do. And there are different loaders which can access loader context api to achieve more.

How all of these magic works?

I dont know now, however.

so,

But I'll try to explore it in the next chapter.

Before we dive into plugins, we should have a idea of how webpack work in a big picture.

For example, when you start webpack to package you modules in this way.

┌─(~/work/webpack-learning/6)──────────(reverland@reverland-R478-R429:pts/14)─┐
└─(20:36:09)──> webpack app.js bundle.js 

Webpack will simply do the following things:

1. require a local installed webpack if possible.
2. parse options to give webpack
3. require real webpack library function which create a compiler represent the fully configured webpack enviroment.
4. run the compiler.
5. the compiler start a compilation which represent a single compilation process
6. compilation load modules and build it into bundled js file, and resolve and build its dependencies
7. bundled file and other assets is emitted.

How all of the process be assembled? The key is tapable.

Tapable is a class for plugin binding and applying.

In my eyes, tapable is just a "EventEmitter" in essence. Every thing that participate in the bundle process is extended with tapable. So they can register functions onto different events, they can fire diferent events at diferent stages. In this way, webpack works.

two methods are used for plugin binding: apply and plugin

The interface is simple, when calling apply method on plugins you'd like to registered, different functions you like to execute with diferent event will be registered onto tapable's _plugin property.

plugin is the interface tapable expose for plugins to actually register callbacks.

Lots of applyPlugins*** is used to fire callbacks with arguments registerd in for different events(callbacks registerd in _plugin property).

Tapable in this way can inject any logic function into different building stage.

Here is the helloworld plugin modified from how to write a plugin, which is a plugin constructor:

function HelloWorldPlugin(options) {
  // Setup the plugin instance with options...
}

HelloWorldPlugin.prototype.apply = function(compiler) {
  compiler.plugin('compilation', function(compilation) {
    compilation.plugin("optimize", function() {
      console.log("Assets are being optimized.");
    });
  });
  compiler.plugin('done', function() {
    console.log('Hello World!'); 
  });
};

module.exports = HelloWorldPlugin;

There are two important objects extending with tapable very important:

1. compiler: which represents the fully configured(configuration, loader, plugin, etc.) webpack enviroment
2. compilation: represents a single build of versioned assets

A plugin is used in this way(Just for showing how it works):

compiler.apply(new HelloWorldPlugin())

Check compiler.apply

Tapable.prototype.apply = function apply() {
    for(var i = 0; i < arguments.length; i++) {
        arguments[i].apply(this);
    }
};

So HelloWorldPlugin.prototype.apply is executed. that is, compiler.plugin.

Check its source

Tapable.prototype.plugin = function plugin(name, fn) {
    if(Array.isArray(name)) {
        name.forEach(function(name) {
            this.plugin(name, fn);
        }, this);
        return;
    }
    if(!this._plugins[name]) this._plugins[name] = [fn];
    else this._plugins[name].push(fn);
};

It just register callback on different event on _plugins.

When a new compilation is started, compiler will emit compilation:

this.applyPlugins("compilation", compilation, params);

check applyPlugins in tapable

Tapable.prototype.applyPlugins = function applyPlugins(name) {
    if(!this._plugins[name]) return;
    var args = Array.prototype.slice.call(arguments, 1);
    var plugins = this._plugins[name];
    for(var i = 0; i < plugins.length; i++)
        plugins[i].apply(this, args);
};

Its obviously applyPlugins will execute callbacks registered on _plugins with specific name.

That's how plugins work.

In fact, webpack itself is organized with lots of internal plugins, which make it composable and flexible. Check lib/webpackOptionsApply.js, After the options is parsed and transfer to webpack core, it apply lots of plugins according to options configured.

Interesting~

I won't cover too much about a compiler's or a compilation's lifecycle, but, now, lets write a simple plugin to inspect what happened inside webpack building process.

┌─(~/work/webpack-learning/6)──────────(reverland@reverland-R478-R429:pts/14)─┐
└─(14:55:12)──> tree                                            ──(日, 7月24)─┘
.
├── app.js
├── b.js
└── InspectPlugin.js

app.js

var b = require('./b.js')
module.exports = b

b.js

var b = 'i\'m b'
module.exports = b

Finally, InspectPlugins.js, the inspect plugin we write to inspect the building process.

var events = ["resolver","this-compilation","global-hash-paths","hash","startup","render","local-vars","require","module-obj","require-extensions","normal-module-factory","before-resolve","after-resolve","emit","compilation","make","run","after-compile","seal","after-environment","normal-module-loader","optimize-chunk-assets","environment","module","expression ","evaluate Identifier __filename","evaluate Identifier __dirname","expression require.main","expression require.extensions","expression module.exports","expression module.loaded","expression module.id","evaluate Identifier module.hot","expression module","after-optimize-chunk-assets","context-module-factory","entry-option","done","invalid","jsonp-script","require-ensure","bootstrap","hot-bootstrap","call require","record","after-hash","additional-chunk-assets","module-require","global-hash","current-hash","expression __webpack_hash__","evaluate typeof __webpack_hash__","call module.hot.accept","call module.hot.decline","expression module.hot","build-module","asset-path","hash-for-chunk","expression process","expression global","expression console","expression Buffer","expression setImmediate","expression clearImmediate","after-resolvers","evaluate typeof ","evaluate Literal","evaluate LogicalExpression","evaluate BinaryExpression","evaluate UnaryExpression","evaluate typeof undefined","evaluate Identifier","evaluate MemberExpression","evaluate CallExpression","evaluate CallExpression .replace","evaluate CallExpression .","evaluate CallExpression .split","evaluate ConditionalExpression","evaluate ArrayExpression","typeof ","expression __webpack_amd_options__","evaluate typeof define.amd","evaluate typeof require.amd","evaluate Identifier define.amd","evaluate Identifier require.amd","can-rename define","rename define","call define","call define:amd:array","call define:amd:item","call define:amd:context","expression require.cache","expression require","call require:commonjs:item","call require:commonjs:context","evaluate typeof require.ensure","typeof require.ensure","evaluate typeof require.include","typeof require.include","call require:amd:array","call require:amd:item","call require:amd:context","alternatives","evaluate typeof module","assign require","can-rename require","rename require","typeof module","evaluate typeof exports","call require.resolve","call require.resolveWeak","call require.resolve(Weak)","call require.resolve(Weak):item","call require.resolve(Weak):context","statement if","expression ?:","evaluate Identifier __resourceQuery","expression __resourceQuery","succeed-module","optimize","before-hash","before-chunk-assets","optimize-assets","record-modules","revive-modules","record-chunks","revive-chunks","should-emit","should-record","call require.config","call requirejs.config","expression require.version","expression requirejs.onError","optimize-chunks","after-optimize-tree","package","chunk-hash","add-module","modules","optimize-module-order","optimize-chunk-order","optimize-chunk-ids","can-rename ","factory","evaluate Identifier ","compile","before-module-ids","optimize-extracted-chunks"]

function InspectPlugin(options) {
}

InspectPlugin.prototype.apply = function(compiler) {
  events.forEach(function(event) {
    compiler.plugin(event, function() {
      console.log('[compiler emit]' + event + '(' + (arguments[0] ? arguments[0].constructor.name : '') + ')')

      if (event === 'compilation') {
        compilation = arguments[0]

        events.forEach(function(e) {
          if (typeof compilation.plugin === 'function') {
            compilation.plugin(e, function() {
              console.log('[compilation emit]' + e)

              if (typeof arguments[arguments.length - 1] === 'function') {
                arguments[arguments.length - 1]()
              }
            })
          }
        })
      }

      if (typeof arguments[arguments.length - 1] === 'function') {
        arguments[arguments.length - 1]()
      }

    })
  })
}

module.exports = InspectPlugin

Bundle it:

┌─(~/work/webpack-learning/6)───────────(reverland@reverland-R478-R429:pts/7)─┐
└─(13:53:46)──> webpack app.js bundle.js --plugin ./InspectPlugin.js 
[compiler emit]entry-option(String)
[compiler emit]after-resolvers(Compiler)
[compiler emit]environment()
[compiler emit]after-environment()
[compiler emit]run(Compiler)
[compiler emit]normal-module-factory(NormalModuleFactory)
[compiler emit]context-module-factory(ContextModuleFactory)
[compiler emit]compile(Object)
[compiler emit]this-compilation(Compilation)
[compiler emit]compilation(Compilation)
[compiler emit]make(Compilation)
[compilation emit]build-module  // build app.js
[compilation emit]normal-module-loader
[compilation emit]succeed-module
[compilation emit]build-module  // build b.js
[compilation emit]normal-module-loader
[compilation emit]succeed-module
[compilation emit]seal
[compilation emit]optimize
[compilation emit]optimize-chunks
[compilation emit]after-optimize-tree
[compilation emit]should-record
[compilation emit]revive-modules
[compilation emit]optimize-module-order
[compilation emit]before-module-ids
[compilation emit]record-modules
[compilation emit]revive-chunks
[compilation emit]optimize-chunk-order
[compilation emit]optimize-chunk-ids
[compilation emit]record-chunks
[compilation emit]before-hash
[compilation emit]chunk-hash
[compilation emit]after-hash
[compilation emit]before-chunk-assets
[compilation emit]additional-chunk-assets
[compilation emit]record
[compilation emit]optimize-chunk-assets
[compilation emit]after-optimize-chunk-assets
[compilation emit]optimize-assets
[compiler emit]after-compile(Compilation)
[compiler emit]should-emit(Compilation)
[compiler emit]emit(Compilation)
[compiler emit]done(Stats)
Hash: c771d64aa3c56fcbe3c1
Version: webpack 1.13.1
Time: 98ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.55 kB       0  [emitted]  main
   [0] ./app.js 45 bytes {0} [built]
   [1] ./b.js 36 bytes {0} [built]

So we can inspect how webpack works in a cleaner way, you can play it with plugin api doc to have a better understanding on webpack's internals.

Last but not least, I'd like to mention about how modules resolved and builded. the core loader functionality is implement by plugins.

As we can see from above our inspectplugin's output, a module is loaded with three events fired:

1. build-module
2. normal-module-build
3. succeed-module

you can check it in lib/compilation.js

Compilation.prototype.buildModule = function(module, thisCallback) {
    this.applyPlugins("build-module", module);
    if(module.building) return module.building.push(thisCallback);
    var building = module.building = [thisCallback];

    function callback(err) {
        module.building = undefined;
        building.forEach(function(cb) {
            cb(err);
        });
    }
    module.build(this.options, this, this.resolvers.normal, this.inputFileSystem, function(err) {
        module.errors.forEach(function(err) {
            this.errors.push(err);
        }, this);
        module.warnings.forEach(function(err) {
            this.warnings.push(err);
        }, this);
        module.dependencies.sort(Dependency.compare);
        if(err) {
            module.error = err;
            this.applyPlugins("failed-module", module);
            return callback(err);
        }
        this.applyPlugins("succeed-module", module);
        return callback();
    }.bind(this));
};

it's obvious, module.build will emit normal-module-build event.

what =module.build=do?

it's in lib/NormalModule.js, actually, it calls doBuild, in this method we see it emit normal-module-loader event.

now check lib/dependencies/LoaderPlugin.js, we see

        compilation.plugin("normal-module-loader", function(loaderContext, module) {
            loaderContext.loadModule = function loadModule(request, callback) {
                var dep = new LoaderDependency(request);
                dep.loc = request;
                compilation.addModuleDependencies(module, [
                    [dep]
], true, "lm", false, function(err) {

This plugin call compilation.addModuleDependencies. In this function, module dependencies are build and their dependencies are processed recursively if configured so.

That's how recursively module resolve and build works.

A little twisted, I think I haven't understand it well…

When a module is builded. doBuild method in core/lib/NormalModuleMixin.js is the method to call. I think the source code a little confused, but let's try to understand it. It do following things

1. prepare public loaderContext, so you can call some value and method in loader functions.
2. prepare the function to evaluate loader function or pitch function in loader context closure.

then, loaders are actually loaded into memory, private loader context are prepared, pitch functions are evaluated one by one. Note, loadPitch is function to evaluate loader's pitch function one by one in recursive way, weired!

Whenever a pitch function return something, the pitch is stopped and the loader functions is evaluated from loader which its next pitch function return something.

nextLoader handle all of loaders evaluate, the first loader receive source code, transform it, and feed it to next loader, and the next loader evaluated in the same way. finally, when all loaders evaluated,=onModuleLoaded= is triggered with the last loader's result as parameter, that is, set the module's _source with the transformed source.

Then the control of program transfer to doBuild's callback.

That's how loaders works under the hood.

Coolllllllll, isn't it, despite of it employee recursive call to implement a loop like use black magic.