Webpack 获取网页包以忽略电子主进程包

虽然对于Electron来说这不是必需的，但我想将所有的呈现过程javascript（与nodejs（称为主过程）javascript类似）打包，并将呈现过程javascript放在一个单独的包中

原因：

这对于启动来说可能要快一点

它将使我能够使用网页服务器进行热加载

我将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')

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 }]
                    ]
                }
            }]
        }]
    }
}

Webpack.config.js

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')

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

输出

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

---

我注意到您的网页配置没有定义目标。添加该配置可能有助于解决此问题。请参阅

electron有两个不同的目标，一个用于主目标，另一个用于渲染器

---

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

谢谢@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

---

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