February 23, 2016 · frontend webpack

webpack secrets

Here's some tricks to use with webpack.

Customize require.ensure load path

By default, require.ensure load script based on the page's path. To change this path, set it with this:

__webpack_public_path__ = 'static/js/'

external require with __non_webpack_require__

requirejs defines a global require function that external scripts can use to load modules. If you want external script to be able to load your modules. You have to do it with your own require function.

// expose api for use by external scripts
window.require = function (parentRequire) {
    return function(module) {
        switch(module) {
        // library
        case 'hippo/lib/react': return require('react');
        case 'hippo/lib/flux': return require('flux');
        case 'hippo/lib/jquery': return require('jquery');
        case 'hippo/d3': return require('d3');
        }
        return parentRequire(module);
    };
}(typeof __non_webpack_require__ === "function" ? __non_webpack_require__ : function() {
    throw new Error("Module '" + module + "' not found")
});

let webpack ignore some require calls.

My app run inside both web browser and electron. I want require('electron') be exported as is.

externals: function(context, request, callback) {
    if(/^electron/.test(request)) {
        return callback(null, "require('" + request + "')");
    }
    callback();
}

prevent node shim

webpack automaticly shim node globals. Use this to customize shimming.

node: {
    global: false,
    process: false,
    console: false,
    Buffer: false,
    setImmediate: false,
    __filename: false,
    __dirname: false
}

require.ensure must not use variable parameter

I was stuck on this for hours, until I did a side by side comparison with version that works.

require.ensure(['../updater']) is compiled to __webpack_require__.e/* nsure */(1) and works. require.ensure([pushSdk]) is compiled to __webpack_require__(694).ensure([pushSdk]) and does not work.

  • LinkedIn
  • Tumblr
  • Reddit
  • Google+
  • Pinterest
  • Pocket