webpack配置

首先配置webpack打包target
文档：https://webpack.docschina.org/configuration/target/

module.exports = {
  // electron 渲染应用
  target:'electron-renderer',
}

安装election运行环境

# Clone this repository
git clone https://github.com/electron/electron-quick-start
# Go into the repository
cd electron-quick-start
# Install dependencies
npm install
# Run the app
npm start

安装好electron运行环境后，需要修改一下main.js配置：

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: true,
      enableRemoteModule: true,
      contextIsolation: false
    }
  })

  // and load the index.html of the app.
  // mainWindow.loadFile('./dist/index.html')
  # 本地项目调试地址
  mainWindow.loadURL("http://localhost:8080");
  // Open the DevTools.
  mainWindow.webContents.openDevTools()
}

问题

Uncaught ReferenceError: exports is not defined 解决办法

这个问题是因为不支持ES6语法问题，需要将ES6转换成ES5。 转换方式：https://blog.csdn.net/weixin_43353035/article/details/126494522

electron require()报错：Uncaught ReferenceError: require is not defined

在election的main.js配置文件中加上这个配置即可：

nodeIntegration: true, //渲染进程是否集成 Nodejs
contextIsolation: false,
enableRemoteModule: true //是否允许渲染进程使用远程模块

remote 使用：https://www.cnblogs.com/axl234/p/15206270.html