feat(plugin-webpack): add nodeIntegration config for renderers

packages/plugin/webpack/src/Config.ts

@@ -59,6 +59,19 @@ export interface WebpackPluginRendererConfig {
    * actually packaged with your app.
    */
   jsonStats?: boolean;
+  /**
+   * Adjusts the Webpack config for the renderer based on whether `nodeIntegration` for the
+   * `BrowserWindow` is enabled. Namely, for Webpack's `target` option:
+   *
+   * * When `nodeIntegration` is true, the `target` is `electron-renderer`.
+   * * When `nodeIntegration` is false, the `target` is `web`.
+   *
+   * Unfortunately, we cannot derive the value from the main process code as it can be a
+   * dynamically generated value at runtime, and Webpack processes at build-time.
+   *
+   * Defaults to `false` (as it is disabled by default in Electron >= 5).
+   */
+  nodeIntegration?: boolean;
   /**
    * Array of entry points, these should map to the windows your app needs to
    * open.  Each window requires it's own entry point

packages/plugin/webpack/src/WebpackConfig.ts

@@ -48,6 +48,10 @@ export default class WebpackConfigGenerator {
     return this.isProd ? 'production' : 'development';
   }
 
+  get rendererTarget() {
+    return this.pluginConfig.renderer.nodeIntegration ? 'electron-renderer' : 'web';
+  }
+
   rendererEntryPoint(
     entryPoint: WebpackPluginEntryPoint,
     inRendererDir: boolean,
@@ -215,7 +219,7 @@ export default class WebpackConfigGenerator {
     return webpackMerge({
       entry,
       devtool: this.sourceMapOption(),
-      target: ['web', 'electron-renderer'],
+      target: this.rendererTarget,
       mode: this.mode,
       output: {
         path: path.resolve(this.webpackDir, 'renderer'),

packages/plugin/webpack/test/WebpackConfig_spec.ts

@@ -8,6 +8,36 @@ import { WebpackPluginConfig, WebpackPluginEntryPoint } from '../src/Config';
 const mockProjectDir = process.platform === 'win32' ? 'C:\\path' : '/path';
 
 describe('WebpackConfigGenerator', () => {
+  describe('rendererTarget', () => {
+    it('is web if undefined', () => {
+      const config = {
+        renderer: {},
+      } as WebpackPluginConfig;
+      const generator = new WebpackConfigGenerator(config, '/', false, 3000);
+      expect(generator.rendererTarget).to.equal('web');
+    });
+
+    it('is web if false', () => {
+      const config = {
+        renderer: {
+          nodeIntegration: false,
+        },
+      } as WebpackPluginConfig;
+      const generator = new WebpackConfigGenerator(config, '/', false, 3000);
+      expect(generator.rendererTarget).to.equal('web');
+    });
+
+    it('is electron-renderer if true', () => {
+      const config = {
+        renderer: {
+          nodeIntegration: true,
+        },
+      } as WebpackPluginConfig;
+      const generator = new WebpackConfigGenerator(config, '/', false, 3000);
+      expect(generator.rendererTarget).to.equal('electron-renderer');
+    });
+  });
+
   describe('getDefines', () => {
     it('throws an error if renderer.entryPoints does not exist', () => {
       const config = {
@@ -348,11 +378,12 @@ describe('WebpackConfigGenerator', () => {
             name: 'main',
             js: 'rendererScript.js',
           }],
+          nodeIntegration: true,
         },
       } as WebpackPluginConfig;
       const generator = new WebpackConfigGenerator(config, mockProjectDir, false, 3000);
       const webpackConfig = await generator.getRendererConfig(config.renderer.entryPoints);
-      expect(webpackConfig.target).to.deep.equal(['web', 'electron-renderer']);
+      expect(webpackConfig.target).to.deep.equal('electron-renderer');
       expect(webpackConfig.mode).to.equal('development');
       expect(webpackConfig.entry).to.deep.equal({
         main: ['rendererScript.js'],
@@ -397,7 +428,7 @@ describe('WebpackConfigGenerator', () => {
       } as WebpackPluginConfig;
       const generator = new WebpackConfigGenerator(config, mockProjectDir, true, 3000);
       const webpackConfig = await generator.getRendererConfig(config.renderer.entryPoints);
-      expect(webpackConfig.target).to.deep.equal(['web', 'electron-renderer']);
+      expect(webpackConfig.target).to.deep.equal('web');
       expect(webpackConfig.mode).to.equal('production');
       expect(webpackConfig.entry).to.deep.equal({
         main: ['rendererScript.js'],