add support for custom electron-only webpack config, fixes #5

Author: nklayman

README.md

@@ -6,64 +6,79 @@ A Vue Cli 3 plugin for Electron with no required configuration that uses [Electr
 
 ## Quick Start:
 
-Open a terminal in the directory of your app created with Vue-CLI 3
+Open a terminal in the directory of your app created with Vue-CLI 3.
+
 Then, install and invoke the generator of vue-cli-plugin-electron-builder by running:
 
-    vue add electron-builder
+vue add electron-builder
 
 That's It! Your ready to go!
 
 ### To start a development server:
 
 If you use [Yarn](https://yarnpkg.com/en/) (strongly recommended):
 
-    yarn serve:electron
+yarn serve:electron
 
 or if you use NPM:
 
-    npm run serve:electron
+npm run serve:electron
 
 ### To build your app:
 
 With yarn:
 
-    yarn build:electron
+yarn build:electron
 
 or with NPM:
 
-    npm run build:electron
+npm run build:electron
 
 ### Folder Structure:
 
 ```
-├── dist/                      # where electron-webpack outputs compiled files (this will overwrite normal build files)
-│   └── ...
+├── dist/ # where electron-webpack outputs compiled files (this will overwrite normal build files)
+
+│ └── ...
+
 ├── dist_electron/
-│   ├── [target platform]-unpacked               # unpacked Electron app (main exe and supporting files)
-|   ├── [application name] setup [version].[target binary (exe|dmg|rpm...)]               # installer for Electron app
-│   └── ...
+
+│ ├── [target platform]-unpacked # unpacked Electron app (main exe and supporting files)
+
+│ ├── [application name] setup [version].[target binary (exe|dmg|rpm...)] # installer for Electron app
+
+│ └── ...
+
 ├── src/
-|   ├─── main/
-|   |    └── [main|index].[js|ts]	# Electron entry file (for Electron's main process)
-|   ├── [main|index].[js|ts]		# your app's entry file (for Electron's render process)
-│   └── ...
-├── electron-builder.[json|yml]		# electron-builder configuration options (can also be placed in package.json under the "build" key)
-├── electron-webpack.[json|yml]		# electron-webpack configuration options (can also be placed in package.json under the "electronWebpack" key)
-├── package.json		# your app's package.json file
+
+│ ├─── main/
+
+│ │ └── [main|index].[js|ts] # Electron entry file (for Electron's main process)
+
+│ ├── [main|index].[js|ts] # your app's entry file (for Electron's render process)
+
+│ └── ...
+
+├── electron-builder.[json|yml] # electron-builder configuration options (can also be placed in package.json under the "build" key)
+
+├── electron-webpack.[json|yml] # electron-webpack configuration options (can also be placed in package.json under the "electronWebpack" key)
+
+├── package.json # your app's package.json file
+
 ├── ...
 ```
 
 ## Further Configuration:
 
-Initial configuration is already set for you in your app's package.json, but it you want to modify it:
+Initial configuration is already set for you in your app's package.json, but if you want to modify it:
 
 ### CLI Options:
 
 When building your app, any arguments will be passed to electron-builder. To pass an argument/arguments to electron-webpack, place them after --webpack.
 
 **Example:**
 
-    yarn build:electron [electron-builder options] --webpack [electron-webpack options]
+yarn build:electron [electron-builder options] --webpack [electron-webpack options]
 
 ### Electron Builder:
 
@@ -73,7 +88,6 @@ As per Electron Builder's documentation, they can be applied:
 
 > * in the `package.json` file of your project using the `build` key on the top level:
 >
->
 > ```
 >  "build": {
 >    "appId": "com.example.app"
@@ -82,7 +96,6 @@ As per Electron Builder's documentation, they can be applied:
 >
 > * or through the `--config <path/to/yml-or-json5-or-toml>` option (defaults to `electron-builder.yml`(or `json`, or [json5](http://json5.org/), or [toml](https://github.com/toml-lang/toml))).
 >
->
 > ```
 >  appId: "com.example.app"
 > ```
@@ -97,7 +110,27 @@ To see avalible options, check out [Electron Webpack Configuration Options](http
 
 As per Electron Webpack's documentation, they can be applied:
 
-> Configurations can be applied in `package.json` at `electronWebpack` or in a separate `electron-webpack.(json|json5|yml)`.
+> in `package.json` at `electronWebpack` or in a separate `electron-webpack.(json|json5|yml)`.
+
+To modify the webpack config for electron builds only, use the webpackConfig object under vue-cli-plugin-electron-builder's plugin options in `vue.config.js`.
+
+```
+// vue.config.js
+
+module.exports  = {
+  configureWebpack: {
+    // Non-electron build/serve configuration
+	// Aliases will be automatically copied from standard config to electron config
+  },
+  pluginOptions: {
+    electronBuilder: {
+      webpackConfig: {
+        // your electron-only webpack config
+      }
+    }
+  }
+};
+```
 
 #### Adding TypeScript Support:
 

generator/index.js

@@ -18,7 +18,8 @@ module.exports = (api, opts) => {
     devDependencies,
     electronWebpack: {
       renderer: {
-        sourceDirectory: 'src'
+        sourceDirectory: 'src',
+        webpackConfig: 'dist_electron/webpack.renderer.additions.js'
       }
     },
     build: {

index.js

@@ -1,4 +1,4 @@
-module.exports = api => {
+module.exports = (api, options) => {
   api.registerCommand(
     'build:electron',
     {
@@ -12,7 +12,7 @@ module.exports = api => {
     },
     (args, rawArgs) => {
       api.setMode('production')
-
+      setWebpackOptions(api, options)
       const execa = require('execa')
       const electronWebpackPath =
         api.resolve('.') + '/node_modules/.bin/electron-webpack'
@@ -68,7 +68,7 @@ module.exports = api => {
     },
     () => {
       api.setMode('dev')
-
+      setWebpackOptions(api, options)
       const execa = require('execa')
       const electronWebpackPath =
         api.resolve('.') + '/node_modules/.bin/electron-webpack'
@@ -91,3 +91,33 @@ module.exports = api => {
     }
   )
 }
+function setWebpackOptions (api, options) {
+  const fs = require('fs')
+  let config
+  if (
+    options.pluginOptions &&
+    options.pluginOptions.electronBuilder &&
+    options.pluginOptions.electronBuilder.webpackConfig
+  ) {
+    config = options.pluginOptions.electronBuilder.webpackConfig
+  } else {
+    config = {}
+  }
+  alias = config.resolve
+    ? config.resolve.alias
+      ? config.resolve.alias
+      : {}
+    : {}
+  if (!config.resolve) config.resolve = {}
+  config.resolve.alias = {
+    ...alias,
+    ...api.resolveWebpackConfig().resolve.alias
+  }
+  if (!fs.existsSync(api.resolve('.') + '/dist_electron')) {
+    fs.mkdirSync(api.resolve('.') + '/dist_electron')
+  }
+  fs.writeFileSync(
+    api.resolve('.') + '/dist_electron/webpack.renderer.additions.js',
+    'module.exports=' + JSON.stringify(config)
+  )
+}