electron-builder打包优化

创建时间:2025-05-12 11:55
长度:1080
浏览:0
评论:0

一般来说,就是修改build.files的配置项

之前我们是把node_modules全部打包了


可以暂时修改一下package.json的dependencies内容,前提得是前端的项目打包好了!!!

比如之前dependencies 有react react-dom之类的,在electron是不需要的,我们暂时把它移除掉


把electron相关的文件也打包了

创建一个webpack.config.js文件

const path = require('path');

module.exports = {
    // webpack 提供的
    target: 'electron-main',
    // 入口文件
    entry: './main.js',
    // 打包放到哪里
    output: {
        path: path.resolve(__dirname, './build'),
        filename: 'main.js'
    },
    node: {
        __dirname: false,
    }
}


在package.json增加及修改打包命令

"electronBuild": "webpack"


{
    "scripts": {
        ...
        "pack": "electron-builder --dir",
        "dist": "electron-builder",
        "electronBuild": "webpack",
        // 下面这两条表示运行pack、dist之前要先打包下面的这两条命令
        "prepack": "npm run build && npm run electronBuild",
        "predist": "npm run build && npm run electronBuild",
    }
}

在package.json的build里添加

"extraMetadata": {
    "main": "./build/main.js"
},


main.js 主窗口的配置文件也要改


const loadURL = isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, './index.html')}`
mainWindow = new BrowserWindow(mainWindowConfig, loadURL)



评论(共0条)