让 webpack 忽略某个导入答案

【问题标题】：Make webpack ignore a certain import让 webpack 忽略某个导入
【发布时间】：2018-11-20 02:09:25
【问题描述】：

我正在尝试使用ElectronJS 和ReactJS 创建桌面应用程序。

渲染器进程是使用 webpack 捆绑的，因为我在其中使用 JSX。

当我尝试在渲染器进程中从电子（例如import electron from 'electron'; 或const electron = require('electron');）导入任何内容时，当我尝试使用 webpack（Web 部件）构建它时，或者当我使用webpack-dev-server 并在 electron 中打开 localhost URL：

https://pastebin.com/WdkCcPzm

请注意，我没有使用create-react-app，bundle.js 是 webpack 的输出，App.jsx 是我试图从中导入电子的文件，我想导入电子以访问 ipcRenderer 变量，并且我没有尝试从渲染器进程（或从主进程）导入fs。

我发现的一个解决方案是通过将此行添加到我的 index.js 来绕过 webpack 的打包

eval('window.Electron = require("electron")');

并通过变量Electron 访问电子（大写的 E 是因为即使没有导入电子，vs 代码也将其识别为命名空间，因此我仍然可以完成代码）

但这真的很难看，我希望有另一种解决方案。

【问题讨论】：

看看这是不是你的情况：github.com/webpack/webpack/issues/3012
没错，你是否在 webpack 配置中使用了 target: 'electron-main' 和 target: 'electron-renderer'？
@PatrickHund，我不是用 webpack 构建主进程，我只是将我的 package.json 中的 main 属性设置为一个需要 'babel-registry' 的文件，然后是我的实际主文件主进程能够使用 es2015 模块。
好的，但是您是否使用 target: 'electron-renderer' 构建渲染器进程？ @skyboyer 发布的 GitHub 问题的链接似乎是完全相同的问题，这就是解决方案
哦，起初没明白你的意思，但是谢谢，成功了！

标签： javascript reactjs webpack electron

【解决方案1】：

为了给 Electron 应用的渲染进程构建 bundle，webpack 提供了一个特殊的 target 参数。

将此添加到您的 webpack 配置中：

target: 'electron-renderer'

查看文档：https://webpack.js.org/configuration/target/

【讨论】：