getting webpack to ignore electron main process packages

Question

While it is not necessary for Electron, I wanted to webpack all the render process javascript (as apposed to the nodejs (called main process) javascript. And put render process javascript in a single bundle.

Why:

1. This might be a bit faster for startup
2. It will give me the ability to use the webpack server for hot loading

Well I pointed webpack at the root of render-side javascript, and it started making the bundle. But it also is seeing some electron remote javascript components and is trying to bundle those in also, and is failing.

How do I get Webpack to ignore lines that are pointing to the remote/main process code: (all my main process code will be in a folder called ./main). I tried to exclude the ./main/* folder, but perhaps I did not do that properly

Example lines

const { remote } = require('electron')
const { dialog } = remote.require('electron')
const { dialog } = require('electron').remote
const utils = remote.require('../main/utils')
const watson = remote.require('../main/watson')

Webpack.config.js

const webpack = require('webpack')
const path = require('path')

const config = {
    context: path.resolve(__dirname, '..', 'src'),
    entry: './dash/dash.js',
    output: {
        path: path.resolve(__dirname, '..' , 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [{
            test: /\.js$/,
            include: path.resolve(__dirname, 'src'),
            exclude: /(main)/,
            use: [{
                loader: 'babel-loader',
                options: {
                    "sourceMaps": "inline",
                    presets: [
                        ['react', "node7", "stage-3",
                            { modules: false }]
                    ]
                }
            }]
        }]
    }
}

module.exports = config

Output

Hash: 3aa4f4a528c7beea5c01
Version: webpack 2.6.0
Time: 4157ms
    Asset     Size  Chunks                    Chunk Names
bundle.js  2.98 MB       0  [emitted]  [big]  main
   [0] ./~/process/browser.js 5.42 kB {0} [built]
   [1] ./~/react/react.js 56 bytes {0} [built]
  [52] ./dist/dash/actions.js 18.6 kB {0} [built]
  [53] ./~/electron/index.js 338 bytes {0} [built]
  [54] ./~/redux/es/index.js 1.08 kB {0} [built]
 [310] ./dist/dash/initialState.json 357 bytes {0} [built]
 [311] ./dist/dash/reducers.js 8.22 kB {0} [built]
 [312] ./dist/jsx/Dashboard.js 7.08 kB {0} [built]
 [313] ./dist/main/utils.js 12.6 kB {0} [built]
 [314] ./~/redux-devtools-extension/index.js 635 bytes {0} [built]
 [315] ./~/redux-thunk/lib/index.js 529 bytes {0} [built]
 [316] ./~/shallow-equal/objects/index.js 394 bytes {0} [built]
 [317] ./dist/dash/dash.js 8.74 kB {0} [built]
 [321] ./dist/jsx/Utilities.js 5.55 kB {0} [built]
 [322] ./dist/main 160 bytes {0} [built]
    + 755 hidden modules

WARNING in ./dist/main/utils.js
34:25-44 Critical dependency: the request of a dependency is an expression

ERROR in ./dist/main/utils.js
Module not found: Error: Can't resolve 'fs' in 'd:\wwwroot\librarian2017\dashboard\dist\main'
 @ ./dist/main/utils.js 5:11-24
 @ ./dist/dash/dash.js

ERROR in ./dist/main/utils.js
Module not found: Error: Can't resolve 'child_process' in 'd:\wwwroot\librarian2017\dashboard\dist\main'
 @ ./dist/main/utils.js 9:22-46
 @ ./dist/dash/dash.js

ERROR in ./~/electron/index.js
Module not found: Error: Can't resolve 'fs' in 'd:\wwwroot\librarian2017\dashboard\node_modules\electron'
 @ ./~/electron/index.js 1:9-22
 @ ./dist/dash/dash.js

ERROR in ./~/get-folder-size/index.js
Module not found: Error: Can't resolve 'fs' in 'd:\wwwroot\librarian2017\dashboard\node_modules\get-folder-size'
 @ ./~/get-folder-size/index.js 3:9-22
 @ ./dist/main/utils.js
 @ ./dist/dash/dash.js

ERROR in ./~/rmdir/lib/rmdir.js
Module not found: Error: Can't resolve 'fs' in 'd:\wwwroot\librarian2017\dashboard\node_modules\rmdir\lib'
 @ ./~/rmdir/lib/rmdir.js 9:9-22
 @ ./~/rmdir/index.js
 @ ./dist/main/utils.js
 @ ./dist/dash/dash.js

Answer 1

Thank you @shashi, I found from on the webpack github site there were two things I was missing. One was the target, and the other was a resolve field (since I am using REACT in jsx files). See solution below:

const webpack = require('webpack')
const path = require('path')

const config = {
    context: path.resolve(__dirname, '..', 'src'),
    entry: './dash/dash.js',
    target: "electron-renderer",
    output: {
        path: path.resolve(__dirname, '..', 'dist'),
        filename: 'bundle.js'
    },
    resolve: { extensions: [".jsx", ".js", ".json"] },
    module: {
        rules: [{
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            include: path.resolve(__dirname, '..', 'src'),
            use: [{
                loader: 'babel-loader',
                options: {
                    "sourceMaps": "inline",
                    "presets": [
                        "react",
                        [
                            "env",
                            {
                                "targets": {
                                    "electron": "1.6.7"
                                },
                                "debug": true,
                                "useBuiltIns": true
                            }
                        ]
                    ],
                    "plugins": [
                        "transform-object-rest-spread"
                    ]
                }
            }]
        }]
    }
}

module.exports = config

Answer 2

I notice that your webpack config does not have target defined. Adding that may help resolve the issue. See https://webpack.js.org/configuration/target/

There are two different targets for electron, one for the main and one for the renderer.

In my app I have two separate webpack configs for the main and renderer.