├── .editorconfig ├── .eslintrc ├── .gitattributes ├── .gitignore ├── .travis.yml ├── CHANGELOG.md ├── LICENSE ├── README.md ├── index.js ├── package.json └── test.js /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = tab 5 | end_of_line = lf 6 | charset = utf-8 7 | trim_trailing_whitespace = true 8 | insert_final_newline = true 9 | 10 | [*.{json,js,yml}] 11 | indent_style = space 12 | indent_size = 2 13 | 14 | [.eslintrc] 15 | indent_style = space 16 | indent_size = 2 17 | 18 | [*.md] 19 | trim_trailing_whitespace = false 20 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "airbnb/legacy", 3 | "env": { 4 | "mocha": true, 5 | "node": true 6 | }, 7 | "rules": { 8 | "func-names": 0 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | npm-debug.log 3 | node_modules 4 | coverage 5 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | language: node_js 3 | node_js: 4 | - node 5 | - 8 6 | - 6 7 | cache: 8 | directories: 9 | - node_modules 10 | script: "npm run test-travis" 11 | after_script: "npm install coveralls@2 && cat ./coverage/lcov.info | coveralls" 12 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # 0.4.0 (2016/1/12) 2 | 3 | #### Bugs Fixed 4 | 5 | **Remove main process only modules** 6 | 7 | 8 | # 0.3.0 (2015/12/16) 9 | 10 | #### Feature 11 | 12 | **Added desktop-capturer for Electron 0.36** 13 | 14 | 15 | # 0.2.0 (2015/11/23) 16 | 17 | #### Feature 18 | 19 | **Update to electron 0.35** 20 | 21 | 22 | # 0.1.1 (2015/10/20) 23 | 24 | #### Bugs Fixed 25 | 26 | - **web-view -> web-frame:** [#1](https://github.com/chentsulin/webpack-target-electron-renderer/pull/1) 27 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 C.T. Lin (webpack-target-electron-renderer) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # webpack-target-electron-renderer 2 | 3 | [![NPM version][npm-image]][npm-url] 4 | [![Build Status][travis-image]][travis-url] 5 | [![Test coverage][coveralls-image]][coveralls-url] 6 | [![Dependency Status][david_img]][david_site] 7 | 8 | > webpack target function for electron renderer 9 | 10 | 11 | ## Install 12 | 13 | ``` 14 | $ npm install webpack-target-electron-renderer 15 | ``` 16 | 17 | 18 | ## Usage 19 | 20 | ```js 21 | var webpackTargetElectronRenderer = require('webpack-target-electron-renderer'); 22 | 23 | var options = { 24 | entry: entry, 25 | output: output, 26 | module: { 27 | loaders: loaders 28 | }, 29 | devtool: opts.devtool, 30 | resolve: { 31 | extensions: extensions, 32 | packageMains: ['webpack', 'browser', 'web', 'browserify', ['jam', 'main'], 'main'] 33 | } 34 | } 35 | 36 | options.target = webpackTargetElectronRenderer(options) 37 | 38 | ``` 39 | 40 | See also [electron-react-boilerplate](https://github.com/chentsulin/electron-react-boilerplate/blob/master/webpack.config.development.js). 41 | 42 | 43 | ## API 44 | 45 | ### webpackTargetElectronRenderer(options) 46 | 47 | #### options 48 | 49 | *Required* 50 | Type: `object` 51 | 52 | just like the object that you used to export by `webpack.config.js`. 53 | 54 | ## How this module works 55 | 56 | 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. 57 | 58 | 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. 59 | 60 | Below is the code about how webpack apply target option: 61 | 62 | ```js 63 | // webpack/WebpackOptionsApply.js 64 | 65 | WebpackOptionsApply.prototype.process = function(options, compiler) { 66 | ... 67 | if(typeof options.target === "string") { 68 | switch(options.target) { 69 | case "web": 70 | ... 71 | case "webworker": 72 | ... 73 | case "node": 74 | case "async-node": 75 | ... 76 | case "node-webkit": 77 | ... 78 | case "atom": 79 | case "electron": 80 | ... 81 | default: 82 | throw new Error("Unsupported target '" + options.target + "'."); 83 | } 84 | } else if(options.target !== false) { 85 | options.target(compiler); 86 | } else { 87 | throw new Error("Unsupported target '" + options.target + "'."); 88 | } 89 | ... 90 | } 91 | 92 | ``` 93 | 94 | As you can see, we can provide a function as target and then it will go into this `else if` branch: 95 | 96 | ```js 97 | } else if(options.target !== false) { 98 | options.target(compiler); 99 | } else { 100 | ``` 101 | 102 | That's it! This is the basic 103 | mechanism about how this module works. 104 | 105 | [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. 106 | 107 | > 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. 108 | 109 | ## Migrate to webpack 2 or webpack 1 >= 1.12.15 110 | 111 | Added `target: 'electron-renderer'` to your `webpack.config.js` instead of using this module: 112 | 113 | ```js 114 | module.exports = { 115 | target: 'electron-renderer', 116 | // ...others 117 | }; 118 | ``` 119 | 120 | See the example [here](https://github.com/chentsulin/electron-react-boilerplate/blob/master/webpack.config.development.js#L83-Lundefined). 121 | 122 | ## License 123 | 124 | MIT © [C.T. Lin](http://webpack-target-electron-renderer) 125 | 126 | [npm-image]: https://badge.fury.io/js/webpack-target-electron-renderer.svg 127 | [npm-url]: https://npmjs.org/package/webpack-target-electron-renderer 128 | [travis-image]: https://travis-ci.org/chentsulin/webpack-target-electron-renderer.svg 129 | [travis-url]: https://travis-ci.org/chentsulin/webpack-target-electron-renderer 130 | [coveralls-image]: https://coveralls.io/repos/chentsulin/webpack-target-electron-renderer/badge.svg?branch=master&service=github 131 | [coveralls-url]: https://coveralls.io/r/chentsulin/webpack-target-electron-renderer?branch=master 132 | [david_img]: https://david-dm.org/chentsulin/webpack-target-electron-renderer.svg 133 | [david_site]: https://david-dm.org/chentsulin/webpack-target-electron-renderer 134 | 135 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var webpack = require('webpack'); 4 | var JsonpTemplatePlugin = webpack.JsonpTemplatePlugin; 5 | var FunctionModulePlugin = require('webpack/lib/FunctionModulePlugin'); 6 | var NodeTargetPlugin = require('webpack/lib/node/NodeTargetPlugin'); 7 | var ExternalsPlugin = webpack.ExternalsPlugin; 8 | var LoaderTargetPlugin = webpack.LoaderTargetPlugin; 9 | 10 | module.exports = function (options) { 11 | return function webpackTargetElectronRenderer(compiler) { 12 | compiler.apply( 13 | new JsonpTemplatePlugin(options.output), 14 | new FunctionModulePlugin(options.output), 15 | new NodeTargetPlugin(), 16 | new ExternalsPlugin('commonjs', [ 17 | 'desktop-capturer', 18 | 'electron', 19 | 'ipc', 20 | 'ipc-renderer', 21 | 'native-image', 22 | 'remote', 23 | 'web-frame', 24 | 'clipboard', 25 | 'crash-reporter', 26 | 'screen', 27 | 'shell' 28 | ]), 29 | new LoaderTargetPlugin(options.target) 30 | ); 31 | }; 32 | }; 33 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack-target-electron-renderer", 3 | "version": "0.4.0", 4 | "description": "webpack target function for electron renderer", 5 | "license": "MIT", 6 | "repository": "chentsulin/webpack-target-electron-renderer", 7 | "scripts": { 8 | "lint": "eslint .", 9 | "test": "mocha", 10 | "test-travis": "node node_modules/.bin/istanbul cover ./node_modules/.bin/_mocha --report lcovonly -- --reporter dot" 11 | }, 12 | "author": { 13 | "name": "C.T. Lin", 14 | "email": "chentsulin@gmail.com", 15 | "url": "https://github.com/chentsulin" 16 | }, 17 | "engines": { 18 | "node": ">=0.10.0" 19 | }, 20 | "files": [ 21 | "index.js" 22 | ], 23 | "keywords": [ 24 | "webpack", 25 | "target", 26 | "electron", 27 | "renderer", 28 | "electron-renderer" 29 | ], 30 | "dependencies": { 31 | "webpack": "^1.12.14" 32 | }, 33 | "devDependencies": { 34 | "babel-eslint": "^6.0.2", 35 | "chai": "^3.5.0", 36 | "eslint": "^2.5.3", 37 | "eslint-config-airbnb": "6.2.0", 38 | "istanbul": "^0.4.2", 39 | "mocha": "*", 40 | "sinon": "^1.17.3" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /test.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var expect = require('chai').expect; 4 | var spy = require('sinon').spy; 5 | var webpackTargetElectronRenderer = require('./'); 6 | var webpack = require('webpack'); 7 | var JsonpTemplatePlugin = webpack.JsonpTemplatePlugin; 8 | var FunctionModulePlugin = require('webpack/lib/FunctionModulePlugin'); 9 | var NodeTargetPlugin = require('webpack/lib/node/NodeTargetPlugin'); 10 | var ExternalsPlugin = webpack.ExternalsPlugin; 11 | var LoaderTargetPlugin = webpack.LoaderTargetPlugin; 12 | 13 | 14 | it('should return a function', function () { 15 | expect(webpackTargetElectronRenderer({})).to.be.a('function'); 16 | }); 17 | 18 | it('should apply plugins to compiler', function () { 19 | var _apply = spy(); 20 | var compiler = { 21 | apply: _apply 22 | }; 23 | 24 | webpackTargetElectronRenderer({ 25 | output: {} 26 | })(compiler); 27 | 28 | expect(_apply.args[0][0]).to.be.an.instanceof(JsonpTemplatePlugin); 29 | expect(_apply.args[0][1]).to.be.an.instanceof(FunctionModulePlugin); 30 | expect(_apply.args[0][2]).to.be.an.instanceof(NodeTargetPlugin); 31 | expect(_apply.args[0][3]).to.be.an.instanceof(ExternalsPlugin); 32 | expect(_apply.args[0][4]).to.be.an.instanceof(LoaderTargetPlugin); 33 | }); 34 | --------------------------------------------------------------------------------