讓webpack忽略電子主進程包

Question

雖然沒有必要爲Electron，但我想webpack所有渲染過程的javascript（與nodejs（稱爲主進程）javascript相同，並將渲染過程JavaScript放在一個包中。

爲什麼：

1. 這可能是有點更快的啓動
2. 它會給我使用的WebPack服務器熱負荷的能力

嗯，我在渲染端JavaScript的根指出的WebPack，並開始進行捆綁。但它也看到一些電子遠程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 }] 
        ] 
       } 
      }] 
     }] 
    } 
} 

模塊.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

謝謝@shashi，我從webpack的github網站上發現了兩件我錯過的東西。一個是目標，而另一個是決心場（因爲我使用的REACT在JSX文件）。請參閱下面的解決方案：

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

我注意到你的webpack配置沒有定義目標。添加這可能有助於解決問題。請參閱https://webpack.js.org/configuration/target/

電子有兩個不同的目標，一個用於主體，一個用於渲染器。

在我的應用程序中，我有兩個獨立的webpack配置主和渲染器。