Electron-react打包及使用Electron-builder生成安装包

electron打包后发现没有更新到最新的代码

打包指令

npm run build

npm run build 会执行 "npm run build:main" "npm run build:renderer"

打包输出配置

可以看下这边的配置的package.json

directories 配置中的参数如下所示：

• "app": 指定了应用程序构建输出的目录。 release/app。
• "buildResources": 指定了构建资源的目录，这些资源将用于应用程序的构建过程。 assets。
• "output": 指定了应用程序构建输出的根目录。 release/build。

在这种情况下，需要确保 Webpack 配置与这些目录结构相匹配，并将构建生成的文件放置在正确的目录中,检查 Webpack 的配置文件（通常是 webpack.config.js）以及其他可能影响构建过程的配置文件，确保它们正确地指定了输出路径。

在electron-react中配置文件在.erb/configs/webpack.config.renderer.pro.ts

另外的webpack.config.renderer.dev.ts配置的是开发的打包，pro配置的是生产环境的打包，如果要打成安装包，就要打pro的包。

打包报错问题

看起来可能是在处理样式文件时发生冲突。冲突的错误消息是：Conflict: Multiple chunks emit assets to the same filename style.css。这通常是因为在多个地方生成了相同名称的 CSS 文件，可能是由于配置文件或项目结构中的某些设置造成的

在我的项目中配置的是多入口的方式，具体方法可以参考这篇文章

主要的代码如下：

new HtmlWebpackPlugin({
      filename: path.join('dialog.html'),
      template: path.join(webpackPaths.srcRendererPath, 'components/index.ejs'),
      minify: {
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        removeComments: true,
      },
      chunks: ['dialog'], // 仅引入对应的入口文件
      isBrowser: false,
      env: process.env.NODE_ENV,
      isDevelopment: process.env.NODE_ENV !== 'production',
      nodeModules: webpackPaths.appNodeModulesPath,
    }),
    new HtmlWebpackPlugin({
      filename: path.join('index.html'),
      chunks: ['index'], // 仅引入对应的入口文件
      template: path.join(webpackPaths.srcRendererPath, 'index.ejs'),
      minify: {
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        removeComments: true,
      }, 
      isBrowser: false,
      env: process.env.NODE_ENV,
      isDevelopment: process.env.NODE_ENV !== 'production',
      nodeModules: webpackPaths.appNodeModulesPath,
    }),

可以看我的代码，有两个chunks，报错的原因就是两个chunks中使用了相同名称是style.css，所以我们需要修改一下配置让每个chunks都拥有自己的style.css，避免冲突

为每个 Chunk 创建独立的 CSS 文件

在您的 Webpack 配置中，确保每个 Chunk 都生成独立的 CSS 文件，以避免冲突。可以使用 mini-css-extract-plugin 插件来实现这一点。

import MiniCssExtractPlugin from 'mini-css-extract-plugin';

plugins: [ 
    ...
    new MiniCssExtractPlugin({ filename: '[name].css', // 为每个 Chunk 创建独立的 CSS 文件 })，
    new HtmlWebpackPlugin({
      filename: path.join('dialog.html'),
      ...
    }),
    new HtmlWebpackPlugin({
      filename: path.join('index.html'),
      ...
    }),
    ...
]

配置完后，继续打包，结果出现以下问题，我寻思这不眼熟吗，这报错还是换汤不换药，很明显打包完后的renderer.js也是要为每个chunk配置不同名称

为每个 Chunk 创建独立的 JS 文件

以下是我的原本的配置，entry指定入口文件，我的项目有多个入口文件，每个入口文件都会产生一个chunk。在之前的错误中，遇到了多个chunk试图生成相同css名的问题，所以依照上面的改动，我们应把output的filename也做同样的修改。

entry: {
    index: [
      path.join(webpackPaths.srcRendererPath, 'index.tsx'),
    ],
    dialog: [
      path.join(webpackPaths.srcRendererPath, 'components/index.tsx'),
    ],
  },
  output: {
    path: webpackPaths.distRendererPath,
    publicPath: './',
    filename: 'renderer.js',
    library: {
      type: 'umd',
    },
  },

修改后的配置，也就是对filename进行修改。避免重名

  output: {
    path: webpackPaths.distRendererPath,
    publicPath: './',
    filename: '[name].js', // 使用chunk的名称作为输出文件名
    library: {
      type: 'umd',
    },
  },

打包成功

没有报错即是打包成功

我们到输出目录检查一下，可以看到为两个入口输出了各自的css和js文件。

release/build下的目录是安装目录，在win下生成的exe文件可以对打包后的程序进行安装

打包成可执行的exe包

一开始我直接用的是

将 Electron 应用程序打包成可执行的 EXE 文件通常需要使用第三方工具来完成，其中一个常用的工具是 electron-builder。笔者现在使用的是Electron-react是集成了electron-builder的， 可以将 Electron 应用程序打包成可执行文件，并生成适用于不同操作系统的安装包

    npx electron-builder

根据在 package.json 中配置的参数，将 Electron 应用程序打包成 EXE 文件，并生成一个安装包。

出现没有权限的错误，直接把他删掉就行了

无报错出现正常执行，可以看到release文件夹下生成了安装文件

安装效果如下

注意事项

打安装包的时候要注意每次都要先build一下，不然可能导致安装包的内容不是最新的