Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chentsulin/webpack-target-electron-renderer
webpack target function for electron renderer
https://github.com/chentsulin/webpack-target-electron-renderer
electron electron-renderer webpack webpack-target
Last synced: 8 days ago
JSON representation
webpack target function for electron renderer
- Host: GitHub
- URL: https://github.com/chentsulin/webpack-target-electron-renderer
- Owner: chentsulin
- License: mit
- Created: 2015-08-26T16:35:49.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2018-11-02T23:15:43.000Z (about 6 years ago)
- Last Synced: 2024-12-09T16:51:25.154Z (17 days ago)
- Topics: electron, electron-renderer, webpack, webpack-target
- Language: JavaScript
- Size: 15.6 KB
- Stars: 115
- Watchers: 5
- Forks: 12
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# webpack-target-electron-renderer
[![NPM version][npm-image]][npm-url]
[![Build Status][travis-image]][travis-url]
[![Test coverage][coveralls-image]][coveralls-url]
[![Dependency Status][david_img]][david_site]
> webpack target function for electron renderer
## Install
```
$ npm install webpack-target-electron-renderer
```
## Usage
```js
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](https://github.com/chentsulin/electron-react-boilerplate/blob/master/webpack.config.development.js).
## 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](http://webpack.github.io/docs/configuration.html#target), 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](https://github.com/webpack/webpack/blob/3d5dc1a7bf8c7e44acb89d3f0c4b357df6a0ac0a/lib/WebpackOptionsApply.js#L122) 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:
```js
// 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:
```js
} else if(options.target !== false) {
options.target(compiler);
} else {
```
That's it! This is the basic
mechanism about how this module works.
[Source code](https://github.com/chentsulin/webpack-target-electron-renderer/blob/master/index.js) is only 32 LoC now, so it should not be so hard to understand.
> Note: [webpack#1467](https://github.com/webpack/webpack/pull/1467) and [webpack#2181](https://github.com/webpack/webpack/pull/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:
```js
module.exports = {
target: 'electron-renderer',
// ...others
};
```
See the example [here](https://github.com/chentsulin/electron-react-boilerplate/blob/master/webpack.config.development.js#L83-Lundefined).
## License
MIT © [C.T. Lin](http://webpack-target-electron-renderer)
[npm-image]: https://badge.fury.io/js/webpack-target-electron-renderer.svg
[npm-url]: https://npmjs.org/package/webpack-target-electron-renderer
[travis-image]: https://travis-ci.org/chentsulin/webpack-target-electron-renderer.svg
[travis-url]: https://travis-ci.org/chentsulin/webpack-target-electron-renderer
[coveralls-image]: https://coveralls.io/repos/chentsulin/webpack-target-electron-renderer/badge.svg?branch=master&service=github
[coveralls-url]: https://coveralls.io/r/chentsulin/webpack-target-electron-renderer?branch=master
[david_img]: https://david-dm.org/chentsulin/webpack-target-electron-renderer.svg
[david_site]: https://david-dm.org/chentsulin/webpack-target-electron-renderer