webpack-target-electron-renderer

webpack target function for electron renderer


Keywords
webpack, target, electron, renderer, electron-renderer
License
MIT
Install
npm install webpack-target-electron-renderer@0.1.0

Documentation

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 node 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 target: 'electron-renderer' on webpack 1.x and 2.x now.

License

MIT © C.T. Lin