webpack-target-electron-renderer

webpack target function for electron renderer

Install

$ npm install webpack-target-electron-renderer

Usage

var webpackTargetElectronRenderer = require('webpack-target-electron-renderer');
var options = {
  entry: entry,
  output: output,
  module: {
    loaders: loaders
  },
  devtool: opts.devtool,
  resolve: {
    extensions: extensions,
    packageMains: ['webpack', 'browser', 'web', 'browserify', ['jam', 'main'], 'main']
  }
}
options.target = webpackTargetElectronRenderer(options)

API

webpackTargetElectronRenderer(options)

options

Required
Type: object

just like the object that you used to export by webpack.config.js.

How this module works

There are some built-in webpack build targets, such as 'web', 'node', 'electron', includes several important modules and global variables resolving rules and templates for chunk and hot-update functionalities.

In electron, there are two different kinds of processes: main and renderer. electron-main is almost the same as node environment and just need to set all of electron built-in modules as externals. However, electron-renderer is a little bit different, it’s just like a mix environment between browser and node. So we need to provide a target using JsonpTemplatePlugin, FunctionModulePlugin for browser environment and NodeTargetPlugin and ExternalsPlugin for commonjs and electron bulit-in modules.

Below is the code about how webpack apply target option:

// webpack/WebpackOptionsApply.js
WebpackOptionsApply.prototype.process = function(options, compiler) {
  ...
  if(typeof options.target === "string") {
        switch(options.target) {
            case "web":
                ...
            case "webworker":
                ...
            case "node":
            case "async-node":
                ...
            case "node-webkit":
                ...
            case "atom":
            case "electron":
                ...
            default:
                throw new Error("Unsupported target '" + options.target + "'.");
        }
    } else if(options.target !== false) {
        options.target(compiler);
    } else {
        throw new Error("Unsupported target '" + options.target + "'.");
    }
    ...
}

As you can see, we can provide a function as target and then it will go into this else if branch:

} else if(options.target !== false) {
  options.target(compiler);
} else {

That’s it! This is the basic
mechanism about how this module works.

Source code is only 32 LoC now, so it should not be so hard to understand.

Note: webpack#1467 and webpack#2181 has been merged and released (>= v1.12.15), so we can use on webpack 1.x and 2.x now.

Migrate to webpack 2 or webpack 1 >= 1.12.15

Added target: 'electron-renderer' to your webpack.config.js instead of using this module:

module.exports = {
  target: 'electron-renderer',
  // ...others
};

See the example here.