{"id":15363803,"url":"https://github.com/chentsulin/webpack-target-electron-renderer","last_synced_at":"2025-08-19T13:32:33.574Z","repository":{"id":85902456,"uuid":"41437146","full_name":"chentsulin/webpack-target-electron-renderer","owner":"chentsulin","description":"webpack target function for electron renderer","archived":false,"fork":false,"pushed_at":"2018-11-02T23:15:43.000Z","size":16,"stargazers_count":115,"open_issues_count":2,"forks_count":12,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-12-09T16:51:25.154Z","etag":null,"topics":["electron","electron-renderer","webpack","webpack-target"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chentsulin.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-08-26T16:35:49.000Z","updated_at":"2024-08-05T03:14:37.000Z","dependencies_parsed_at":"2023-03-07T08:00:18.572Z","dependency_job_id":null,"html_url":"https://github.com/chentsulin/webpack-target-electron-renderer","commit_stats":{"total_commits":25,"total_committers":5,"mean_commits":5.0,"dds":"0.16000000000000003","last_synced_commit":"34c191025473c604a427b516f478d898ecbc0561"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chentsulin%2Fwebpack-target-electron-renderer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chentsulin%2Fwebpack-target-electron-renderer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chentsulin%2Fwebpack-target-electron-renderer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chentsulin%2Fwebpack-target-electron-renderer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chentsulin","download_url":"https://codeload.github.com/chentsulin/webpack-target-electron-renderer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230355828,"owners_count":18213535,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["electron","electron-renderer","webpack","webpack-target"],"created_at":"2024-10-01T13:08:34.267Z","updated_at":"2024-12-19T00:09:40.307Z","avatar_url":"https://github.com/chentsulin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# webpack-target-electron-renderer\n\n[![NPM version][npm-image]][npm-url]\n[![Build Status][travis-image]][travis-url]\n[![Test coverage][coveralls-image]][coveralls-url]\n[![Dependency Status][david_img]][david_site]\n\n\u003e webpack target function for electron renderer\n\n\n## Install\n\n```\n$ npm install webpack-target-electron-renderer\n```\n\n\n## Usage\n\n```js\nvar webpackTargetElectronRenderer = require('webpack-target-electron-renderer');\n\nvar options = {\n  entry: entry,\n  output: output,\n  module: {\n    loaders: loaders\n  },\n  devtool: opts.devtool,\n  resolve: {\n    extensions: extensions,\n    packageMains: ['webpack', 'browser', 'web', 'browserify', ['jam', 'main'], 'main']\n  }\n}\n\noptions.target = webpackTargetElectronRenderer(options)\n\n```\n\nSee also [electron-react-boilerplate](https://github.com/chentsulin/electron-react-boilerplate/blob/master/webpack.config.development.js).\n\n\n## API\n\n### webpackTargetElectronRenderer(options)\n\n#### options\n\n*Required*\nType: `object`\n\njust like the object that you used to export by `webpack.config.js`.\n\n## How this module works\n\nThere 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.\n\nIn 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. \n\nBelow is the code about how webpack apply target option:\n\n```js\n// webpack/WebpackOptionsApply.js\n\nWebpackOptionsApply.prototype.process = function(options, compiler) {\n  ...\n  if(typeof options.target === \"string\") {\n\t\tswitch(options.target) {\n\t\t\tcase \"web\":\n\t\t\t\t...\n\t\t\tcase \"webworker\":\n\t\t\t\t...\n\t\t\tcase \"node\":\n\t\t\tcase \"async-node\":\n\t\t\t\t...\n\t\t\tcase \"node-webkit\":\n\t\t\t\t...\n\t\t\tcase \"atom\":\n\t\t\tcase \"electron\":\n\t\t\t\t...\n\t\t\tdefault:\n\t\t\t\tthrow new Error(\"Unsupported target '\" + options.target + \"'.\");\n\t\t}\n\t} else if(options.target !== false) {\n\t\toptions.target(compiler);\n\t} else {\n\t\tthrow new Error(\"Unsupported target '\" + options.target + \"'.\");\n\t}\n\t...\n}\n\n```\n\nAs you can see, we can provide a function as target and then it will go into this `else if` branch:\n\n```js\n} else if(options.target !== false) {\n  options.target(compiler);\n} else {\n```\n\nThat's it! This is the basic \nmechanism about how this module works.\n\n[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.\n\n\u003e 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 (\u003e= v1.12.15), so we can use  on webpack 1.x and 2.x now.\n\n## Migrate to webpack 2 or webpack 1 \u003e= 1.12.15\n\nAdded `target: 'electron-renderer'` to your `webpack.config.js` instead of using this module:\n\n```js\nmodule.exports = {\n  target: 'electron-renderer',\n  // ...others\n};\n```\n\nSee the example [here](https://github.com/chentsulin/electron-react-boilerplate/blob/master/webpack.config.development.js#L83-Lundefined).\n\n## License\n\nMIT © [C.T. Lin](http://webpack-target-electron-renderer)\n\n[npm-image]: https://badge.fury.io/js/webpack-target-electron-renderer.svg\n[npm-url]: https://npmjs.org/package/webpack-target-electron-renderer\n[travis-image]: https://travis-ci.org/chentsulin/webpack-target-electron-renderer.svg\n[travis-url]: https://travis-ci.org/chentsulin/webpack-target-electron-renderer\n[coveralls-image]: https://coveralls.io/repos/chentsulin/webpack-target-electron-renderer/badge.svg?branch=master\u0026service=github\n[coveralls-url]: https://coveralls.io/r/chentsulin/webpack-target-electron-renderer?branch=master\n[david_img]: https://david-dm.org/chentsulin/webpack-target-electron-renderer.svg\n[david_site]: https://david-dm.org/chentsulin/webpack-target-electron-renderer\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchentsulin%2Fwebpack-target-electron-renderer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchentsulin%2Fwebpack-target-electron-renderer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchentsulin%2Fwebpack-target-electron-renderer/lists"}