在没有 webpack-dev-server 的情况下手动设置电子反应答案

【问题标题】：Manually setup react for electron without webpack-dev-server在没有 webpack-dev-server 的情况下手动设置电子反应
【发布时间】：2020-04-07 05:10:37
【问题描述】：

我正在尝试为我的电子应用设置 react。

我的主要目标是在不使用任何开发服务器的情况下在电子中使用本机反应。

将开发服务器与电子应用程序一起使用只会产生比以前更多的问题。

我将使用 webpack 来设置 react，但不应该创建开发服务器。我只尝试了没有 webpack 的 bable，但它似乎功能较少。

另外，在开发和构建最终的电子应用程序期间，我必须如何将电子与编译反应一起使用。

【问题讨论】：

标签： reactjs webpack electron

【解决方案1】：

安装以下依赖项：

npm i webpack webpack-cli html-webpack-plugin html-loader @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev

使用 :

创建一个 .babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

使用以下命令创建 webpack.config.js：

const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "",//Your location to index.html which react renders to
      filename: "./index.html" //Output file name
    })
  ]
};

创建一个 index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>How to set up React, Webpack, and Babel</title>
</head>
<body>
<div id="root"></div>
</body>
</html>

然后创建一个基本的反应应用程序。

同样在 index.html 所在的文件夹中创建一个 index.js 并在 index.js 中添加这一行：

import Form from ""; //Location to react app

将以下脚本添加到 package.json：

"scripts": {
  "build": "webpack --mode production"
}

最后执行这一行，你的编译代码将在 dist 文件夹中：

npm run build

现在，要添加到 electron，你可以根据你的 electron 项目更改路径，并将 Electron 的 main.js 中的 index.html 指向 dist 文件夹中的那个。

另外，当使用 electron 时，使用 webpack 只执行 src 文件夹而不是外部。将电子 js 脚本远离 webpack。

【讨论】：