Webpack concat 和电子 index.js 需要问题答案

【问题标题】：Webpack concat and electron index.js require issueWebpack concat 和电子 index.js 需要问题
【发布时间】：2025-12-01 06:20:02
【问题描述】：

我正在使用电子包构建反应应用程序，我现在正在生产构建。

我希望所有文件都被连接和丑化，但是当我这样做时，我的 index.js 无法正常工作，因为我不能需要依赖项，这是我的代码：

index.js

/* eslint-disable import/no-extraneous-dependencies */
const electron = require('electron');
const electronContextMenu = require('electron-context-menu');

const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

let mainWindow = null;

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        return app.quit();
    }
    return null;
});

electronContextMenu();

app.on('ready', () => {
    mainWindow = new BrowserWindow({ width: 1024, height: 728 });
    mainWindow.loadURL('http://localhost:8080/');
    mainWindow.on('closed', () => (mainWindow = null));
});

webpack 配置

/* eslint-disable no-unused-vars */
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const autoprefixer = require('autoprefixer');

/**
 * Env
 * Get npm lifecycle event to identify the environment
 */
const ENV = process.env.npm_lifecycle_event;
const isProd = ENV === 'build' || ENV === 'build-all';

const options = {
    module: {
        loaders: [{
            test: /\.js(x|)$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
                presets: ['es2015', 'es2016', 'stage-0', 'react', 'react-hmre'],
            },
        }, {
            test: /\.json$/,
            loaders: ['json-loader'],
        }, {
            test: /\.css$/,
            loader: 'style-loader!css-loader',
        }, {
            test: /\.scss$/,
            loaders: ['style-loader', 'css-loader', 'sass-loader'],
        }, {
            test: /\.(png|woff|woff2|eot|ttf|svg)$/,
            loader: 'url-loader',
        }],
    },
    output: {
        path: path.join(__dirname, 'build'),
        publicPath: '/',
        filename: 'bundle.js',
    },
    resolve: {
        extensions: ['', '.js', '.jsx'],
        packageMains: ['webpack', 'browser', 'web', 'browserify', ['jam', 'main'], 'main'],
    },
    entry: [
        './src/render.jsx',
    ],
    target: 'electron-main',
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, 'src/resource/index.html'),
            filename: 'index.html',
            inject: 'body',
        }),
    ],
};

/**
 * PostCSS
 * Reference: https://github.com/postcss/autoprefixer-core
 * Add vendor prefixes to your css
 */
options.postcss = [
    autoprefixer({
        browsers: ['last 2 version'],
    }),
];

if (!isProd) {
    options.devtool = 'inline-source-map';
    options.plugins.push(new UglifyJSPlugin());
}

module.exports = options;

在运行构建的应用程序后，我收到此错误：

A JavaScript error occurred in the main process
Uncaught Exception:
Error: Cannot find module 'electron-context-menu'
    at Module._resolveFilename (module.js:470:15)
    at Function.Module._resolveFilename (/home/damian/projects/ownvpnreact/dist/OwnVpn-linux-x64/resources/electron.asar/common/reset-search-paths.js:35:12)
    at Function.Module._load (module.js:418:25)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/home/damian/projects/ownvpnreact/dist/OwnVpn-linux-x64/resources/app/index.js:3:29)
    at Object.<anonymous> (/home/damian/projects/ownvpnreact/dist/OwnVpn-linux-x64/resources/app/index.js:25:3)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)

有人知道如何解决这个问题吗？

【问题讨论】：

标签： reactjs webpack electron require

【解决方案1】：

您的错误消息表明未安装“electron-context-menu”节点模块。打开终端并从项目的根目录运行“npm install --save electron-context-menu”来解决。

有关电子上下文菜单的更多信息：https://github.com/sindresorhus/electron-context-menu

【讨论】：

【解决方案2】：

同样的问题。 electron-context-menu 未打包到生产版本中。可以通过手动将 node_modules 文件夹包含到您的构建中来解决，尽管可能不是最佳选择

【讨论】：