webpack - 如何在 Electron 中为 "require(ffi)' 模块配置 webpack？

Question

我用 require('ffi') node-ffi在我的app\electron\main.dev.js如果在没有 webpack 的情况下启动，它会按预期工作:

"start-main-dev": "cross-env HOT=1 NODE_ENV=development ME_ENV=me BABEL_ENV=electron node --trace-warnings ./node_modules/electron/cli.js -r @babel/register ./app/electron/main.dev.js" 

但是当我使用 webpack 启动我的 Electron 应用程序时

 "start-main-webpack-dev": "cross-env HOT=1 NODE_ENV=development  BABEL_ENV=electron node --trace-warnings -r @babel/register ./node_modules/webpack/bin/webpack --config internals/webpack/webpack.main.dev.js --colors",

我收到一个错误:

UnhandledPromiseRejectionWarning: Error: Could not locate the bindings file. Tried:
 тЖТ D:\JavaScript\ElectronReactBoilerplate4\app\build\binding.node
 тЖТ D:\JavaScript\ElectronReactBoilerplate4\app\build\Debug\binding.node
 .....

我的 webpack.main.dev.js

`import path from 'path';
import webpack from 'webpack';
import UglifyJSPlugin from 'uglifyjs-webpack-plugin';
import baseConfig from './webpack.base.babel';
export default baseConfig({
  devtool: 'source-map',
  mode: 'development',
  target: 'electron-main',
  entry: path.resolve(process.cwd(), 'app/electron/main.dev.js'),
  output: {
    path: path.resolve(process.cwd(), 'app/electron/'),
    filename: './main.prod.js',
  },
  optimization: {
    minimize: false,
    minimizer: [
      new UglifyJSPlugin({
        parallel: true,
        sourceMap: true,
        cache: true,
      }),
    ],
  },
  plugins: [
    new webpack.EnvironmentPlugin({
      NODE_ENV: 'development',
      DEBUG_PROD: true,
      START_MINIMIZED: false,
    }),
  ],
  node: {
    __dirname: true,
    __filename: true,
  },
});`

我的 webpack.base.babel.js

`const path = require('path');
const webpack = require('webpack');
const { dependencies: externals } = require('../../app/package.json');
module.exports = options => ({
  mode: options.mode,
  entry: options.entry,
  output: Object.assign(
    {
      path: path.resolve(process.cwd(), 'app/build'),
      publicPath: '/',
      libraryTarget: 'commonjs2',
    },
    options.output,
  ),
 optimization: options.optimization,
  module: {
    rules: [
      {
        test: /\.jsx?$/, 
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: options.babelQuery,
        },
      },     
     .................
},
    ],
  },
    plugins: options.plugins.concat([
      new webpack.EnvironmentPlugin({
        NODE_ENV: 'development',
      }),
    ]),
    resolve: {
      modules: ['node_modules', 'app'],
      extensions: ['.js', '.jsx', '.react.js', '.json'],
      mainFields: ['browser', 'jsnext:main', 'main'],
    },
    devtool: options.devtool,
    target: options.target || 'web', 
    performance: options.performance || {},
    node: options.node,
    devServer: options.devServer,
    externals: [...Object.keys(externals || {})],
  });'

所以，问题在于我的 webpack 配置。
更重要的是，问题似乎是 that the Webpack compiler converts the require() call to its own __webpack_require__() and at run-time... ,
但如何解决呢？

Answer 1

最后我已经解决了。刚刚添加 externals: { ffi: 'ffi' }给我的webpack.main.prod.js