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.