How to configure webpack for "require(ffi)' module in electron?

Question

I use require('ffi') node-ffi in my app\electron\main.dev.js and it works as expected if launched without 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" 

But when I launched my Electron application using webpack

 "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",

I got an error:

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

My 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,
  },
});`

My 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 || {})],
  });'

So, problem lays in my webpack configuration.
Even more, seems, the problem is that the Webpack compiler converts the require() call to its own __webpack_require__() and at run-time...,
but how to workaround it?

Answer 1

Finally I have solved it. Just added externals: { ffi: 'ffi' } to my webpack.main.prod.js