Awesome

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.