Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


NPM version Build Status Test coverage Dependency Status

webpack target function for electron renderer


$ npm install webpack-target-electron-renderer


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']
} = webpackTargetElectronRenderer(options)

See also electron-react-boilerplate.




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 === "string") {
		switch( {
			case "web":
			case "webworker":
			case "node":
			case "async-node":
			case "node-webkit":
			case "atom":
			case "electron":
				throw new Error("Unsupported target '" + + "'.");
	} else if( !== false) {;
	} else {
		throw new Error("Unsupported target '" + + "'.");

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

} else if( !== false) {;
} 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.


MIT © C.T. Lin