webpack target function for electron renderer
JavaScript
Pull request Compare This branch is 2 commits behind chentsulin:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.editorconfig
.eslintrc
.gitattributes
.gitignore
.travis.yml
CHANGELOG.md
LICENSE
README.md
index.js
package.json
test.js

README.md

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