让 webpack 忽略电子主进程包答案

【问题标题】：getting webpack to ignore electron main process packages让 webpack 忽略电子主进程包
【发布时间】：2017-10-25 07:50:32
【问题描述】：

虽然 Electron 没有必要，但我想 webpack 所有渲染进程 javascript（与 nodejs（称为主进程）javascript 相对）。并将渲染进程 javascript 放在一个包中。

原因：

这对于启动可能会快一些
它将使我能够使用 webpack 服务器进行热加载

好吧，我将 webpack 指向了渲染端 javascript 的根，它开始制作捆绑包。但它也看到了一些电子远程 javascript 组件，并试图将它们捆绑在一起，但失败了。

如何让 Webpack 忽略指向远程/主进程代码的行：（我所有的主进程代码都在一个名为 ./main 的文件夹中）。我试图排除 ./main/* 文件夹，但也许我没有正确地做到这一点

示例行

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 = 配置

输出

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

【问题讨论】：

utils 和 watson 有什么你在渲染进程中需要的？
我正在使用远程 API 让渲染进程调用主进程函数（在主进程中运行的 util 和 Watson 模块中）
electron 渲染进程是一个 react 应用程序，是 Watson 的一个前端，一个 nodejs windows 服务。我需要一个 GUI 来安装和启动停止节点服务

标签： webpack electron

【解决方案1】：

我注意到您的 webpack 配置没有定义目标。添加它可能有助于解决问题。见https://webpack.js.org/configuration/target/

electron 有两种不同的目标，一种用于主程序，一种用于渲染器。

在我的应用中，我有两个单独的 webpack 配置，分别用于主渲染器和渲染器。

【讨论】：

【解决方案2】：

谢谢@shashi，我在 webpack github 网站上发现我遗漏了两件事。一个是目标，另一个是解析字段（因为我在 jsx 文件中使用 REACT）。请参阅下面的解决方案：

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

【讨论】：