目录

  1. Webpack + Vue 搭建开发环境及打包安装 ------- 打包渲染进程
  2. Electron + Webpack  搭建开发环境及打包安装 ------- 打包主进程
  3. Electron + Webpack + Vue 搭建开发环境及打包安装 ---- 打包electron应用

二、打包主线程

1. 项目目录结构

　　首先创建一个项目文件夹main 然后在该文件夹中执行 npm init -y 命令

　　目录结构说明：

　　main

　　   | - app　　　文件输出目录

　　   | - builder　　构建配置目录

　　　　 | - webpack.config.js

　　   | - src　　　   资源文件目录

　　　　 | - createWindow

　　　　　　　| - index.js

　　　　 | - index.html

　　　　 | main.js

 　  | - package.json

2. 书写配置文件

　　/builder/webpack.config.js  　　添加一下代码

 1 const path = require('path');

 2 const webpack = require('webpack');

 3 const { dependencies } = require('../package.json');

 4 const ElectronDevWebpackPlugin = require('electron-dev-webpack-plugin');

 5

 6 module.exports = {

 7     // 配置开发模式

 8     mode: 'development',

 9     entry: {

10         // 配置入口文件

11         main: path.join(__dirname, '../src/main.js')

12     },

13     // 配置出口文件

14     output: {

15         path: path.join(__dirname, '../app/'),

16         libraryTarget: 'commonjs2',

17         filename: '[name].js'

18     },

19     // 监听文件改变

20     watch: true,

21     optimization: {

22         minimize: true,

23     },

24     module: {

25         rules: [{

26             test: /\.js$/,

27             loader: 'babel-loader',

28             exclude: /node_modules/

29         }, {

30             test: /\.node$/,

31             loader: 'node-loader'

32         }]

33     },

34     externals: [

35         ...Object.keys(dependencies || {})

36     ],

37     node: {

38         __dirname: true,

39         __filename: true

40     },

41     plugins: [

42         new webpack.DefinePlugin({}),

43         new ElectronDevWebpackPlugin()

44     ],

45     target: 'electron-main'

46 }

　　/builder/dev.js 添加一下代码

 1 const webpack = require('webpack');

 2 const mainConfig = require('./webpack.config.js');

 3

 4 function mainDev(){

 5   　// 运行 webpack打包

 6     webpack(mainConfig, err => {

 7         if(err){

 8             console.log('打包主进程遇到Error！');

 9         } else {

10             console.log("打包主进程成功");

11         }

12     })

13 }

14

15 mainDev();

　　/src/mian.js 　　添加一下代码

 1 const electron = require('electron');

 2 const { createMianWin } = require('./createWindow');

 3 const path = require("path");

 4

 5 class App {

 6     constructor({app, BrowserWindow}){

 7         this.BrowserWindow = BrowserWindow;

 8         this.app = app;

 9         this.win = null;

10         this.eventHandle(app);

11     }

12     createWindow(){

13         this.win = createMianWin();

14         let filePath = path.join(__dirname, './index.html');

15         this.win.loadFile(filePath);

16         // 等待渲染进程页面加载完毕再显示窗口

17         this.win.once('ready-to-show', () => this.win.show())

18     }

19     eventHandle(app){

20         app.on('closed', () => this.closed());

21         app.on('ready', () => this.ready());

22         app.on('window-all-closed', () => this.windowAllClosed());

23         app.on('activate', () => this.activate());

24     }

25     activate(){

26         if(!this.win) this.createWindow();

27     }

28     windowAllClosed(){

29         if(process.platform !== 'darwin') this.app.quit();

30     }

31     ready(){

32         this.createWindow();             // 创建主窗口

33     }

34     closed(){

35         this.win = null;

36     }

37 }

38

39 let app = new App(electron);

　　/src/createWindow/index.js 　　添加如下代码　

 1 const { BrowserWindow, dialog } = require('electron');

 2

 3 module.exports = {

 4     createMianWin(options = {}){

 5         options = Object.assign({

 6             width: 1200,    // 窗口宽度

 7             height: 800,    // 窗口高度

 8             // autoHideMenuBar:true,

 9             backgroundColor: '#fff',    // 窗口背景颜色

10             show: false,                // 创建窗口后不显示窗口

11             hasShadow: false,

12             webPreferences:{

13                 nodeIntegration: true, // 在渲染进程引入node模块

14             }

15         }, options);

16         return new BrowserWindow(options);

17     }

18 }

　　/src/index.html 　　添加如下代码

 1 <!DOCTYPE html>

 2 <html lang="en">

 3 <head>

 4     <meta charset="UTF-8">

 5     <title>electron</title>

 6 </head>

 7 <body>

 8     <h1>Hello Electron</h1>

 9 </body>

10 </html>

3. 添加npm 命令　　

　　/package.json 　　添加 npm 脚本命令

　　"dev": "node ./builder/dev.js"

4. 安装所需依赖

  1. webpack
  2. webpack-cli
  3. electron-dev-webpack-plugin
  4. babel-loader
  5. node-loader
  6. electron
  7. @babel/core

吐槽一句：昨天在写博客的时候 webpack 还是 5.10.3 版本今天就变成 5.11.0版本了

5. 运行npm 脚本

　　在项目的目录下运行 　　npm run dev 运行成功将会看到如下界面

　　然后会自动弹出electron App 窗口界面  如下效果表示配置成功

6. 测试热加载是否生效

　　打开 /src/main.js 对其中的代码进行修改然后再次保存，electron App 窗口会里面重新关闭并自动重启编译，表示热加载配置成功

7. 总结

　　至于还有打包生成exe可执行文件在后面 进行组合一起的时候再进行说明，最后就是在这里附上源码地址 https://github.com/Liting1/webpack5-electron

　如果有问题可以留言讨论

二、Electron + Webpack + Vue 搭建开发环境及打包安装的更多相关文章

  1. 一、Electron + Webpack + Vue 搭建开发环境及打包安装

    目录 Webpack + Vue 搭建开发环境及打包安装 ------- 打包渲染进程 Electron + Webpack  搭建开发环境及打包安装 ------- 打包主进程 Electron + ...

  2. vue搭建开发环境

    windows下搭建vue开发环境 一.安装node.js 安装   vue项目通常通过webpack工具来构建,而webpack命令的执行是依赖node.js环境,所以首先要安装node.js. n ...

  3. React + webpack 快速搭建开发环境

    因网上大多React + webpack快速搭建的运行不起来,便自行写了一个.在搭建开发环境的前需安装nodejs,npm. 新建一个工作目录,比如叫reactdome,在reactdome目录中运行 ...

  4. 2 webpack 4 加vue搭建开发环境最终配置

    1 package.json { "name": "c", "version": "1.0.0", "desc ...

  5. [Vue] karme/jasmine/webpack/vue搭建测试环境

    karma 和 jasmine karma 是 google 开源的一个基于 Node.js 的 JavaScript 前端测试运行框架,前身叫 Testacular. jasmine 是一个 jav ...

  6. 搭建开发环境3) Debian8 安装Netbeans

    1.下载最新版的Netbeans.sh(netbeans-8.2-linux.sh) 2.进入管理员账户,移动到下载的目录 ./netbeans-8.2-linux.sh //执行安装脚本 出现界面安 ...

  7. 搭建开发环境2)Debian8 安装jdk 1.8

    1.由于Debian自带了openjava运行时需要先卸载掉 java -version //查看当前java版本 apt-get remove openjdk* //卸载当前的openjdk 2.下 ...

  8. Mac安装vue.js开发环境

    Mac安装vue.js开发环境 DannyHooDanny的专栏订阅 一.vue.js开发环境 二.初始化一个vue.js项目 三.vue.js项目打包部署 本来以为在Mac上搭建vue.js的环境挺 ...

  9. Window上python 开发--1.搭建开发环境

    事实上在开发python最好在ubuntu环境下,简单也便于扩展各个package.可是我的linux的电脑临时不在身边.还的我老婆的电脑win7没办法啊. 因为python的跨平台性.在window ...

随机推荐

  1. 还不懂java类加载机制的，建议看下这份阿里技术官总结的笔记！

    类加载机制 把class文件加载到内存,并对数据进行校验,准备,解析,初始化,形成可以被虚拟机直接使用的字节码 类加载的时机(触发类的初始化) 使用new关键字实例化对象 读取一个类的静态代码块 使用 ...

  2. 面试官：小伙子，你给我讲一下java类加载机制和内存模型吧

    类加载机制 虚拟机把描述类的数据从 Class文件加载到内存,并对数据进行校验.转换解析和初始化,最终形成可以被虚拟机直接使用的java类型,这就是虚拟机的类加载机制. 类的生命周期 加载(Loadi ...

  3. 用Camtasia来快速地给视频添加水印

    在日常生活中,视频的流行度越来越高,各种短视频的软件蜂拥上市,所以越来越多的人走上了自媒体的道路,在这条路上,谁的视频更加的精致,谁才能获得更多的关注度,相应的也能增加自己的人气. 但是在制作视频的过 ...

  4. C++ cout格式化输出完全攻略

    写算法题的时候突然发现自己忘记基本的C++:cout格式化输出了,赶紧拉出以前的C++学习笔记重新看一看. 部分内容来自教程:C语言中文网(一个很棒的网站) 有时希望按照一定的格式进行输出,如按十六进 ...

  5. Goland 2020.2.x 激活码永久破解教程 （最新Goland激活码！2020.11.26亲测可用！）

    在2020.11.26 Goland的用户们又迎来了一次更新,这就导致很多软件打开时候就提示Goland激活码已经失效,码小辫第一时间给各位分享了关于最新Goland激活破解教程! goland已经更 ...

  6. Linux 系统故障排查，这里看过来

    来源:https://www.jianshu.com/p/0bbac570fa4c 导读 有时候会遇到一些疑难杂症,并且监控插件并不能一眼立马发现问题的根源.这时候就需要登录服务器进一步深入分析问题的 ...

  7. 使用github actions 完成一些自动化工作

    github actions 是什么? github actions是github的持续集成及自动化工作流服务,使用起来都比较方便.大部分github actions都可以在https://githu ...

  8. FPGA PS2协议

    VerilogHDL那些事儿_建模篇(黑金FPGA开发板配套教程) 作者:akuei2 说明:参照该书将部分程序验证学习一遍 学习时间:2014年5月3号 主要收获: 1. 对PS2接口有初步了解: ...

  9. JZOJ 11.14 提高B组反思

    JZOJ 11.14 提高B组反思 T1 题目虽然有点高大上,但是很容易懂 有一个\(d\)维空间,同时有一个长度为\(2n\)的操作序列,每个操作往某一维的正方向或反方向走一格,问多少种方案使得最后 ...

  10. 被老猿误解的Python匿名函数lambda

    在<第2.3节 Python运算符大全>老猿这样描述lambda:"上述运算符中有个lambda,这是个lambda就是用来定义一个匿名函数的.老猿认为用处不大,具体内容大家可以 ...