Skip to content

chentsulin/webpack-target-electron-renderer

master
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?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

webpack-target-electron-renderer

NPM version Build Status Test coverage Dependency Status

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)

See also electron-react-boilerplate.

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.

License

MIT © C.T. Lin