Question

虽然没有必要使用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 = 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

Answer 1

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

电子有两个不同的目标，一个用于主要，一个用于渲染器。

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

Answer 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

让webpack忽略电子主流程包

2 个答案: