電子メインプロセスパッケージを無視するようにwebpackを取得する

Question

電子版では必要ないが、レンダリングプロセスのすべてのjavascriptを（メインプロセスと呼ばれる）javascriptにappappして、レンダリングプロセスのjavascriptを単一のバンドルに入れたい。

理由：それは私のホットロードのために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

ありがとう、私はwebpackのgithubサイトから見つけたものが2つありました。 1つはターゲットで、もう1つは解決フィールドです（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 

Answer 2

あなたのwebpack設定には、ターゲットが定義されていません。追加すると、問題を解決するのに役立ちます。 https://webpack.js.org/configuration/target/

電子のターゲットは、メインとレンダラの2つです。

私のアプリでは、メインとレンダラーの2つの別々のwebpack設定があります。