electron-vue架构解析3-开发环境启动流程分析（原）

上一节我们介绍了生产环境的打包流程，这一节我们来看开发环境的启动流程。

该框架主要修改是对开发环境的优化，包括了于开发环境的配置文件隔离，主进程和渲染进程配置文件隔离，编译过程提示等功能，因此这一节内容才是整个框架的核心。
我们从开发人员用到的启动命令说起。
从package中我们看到启动命令就是：

"dev": "node .electron-vue/dev-runner.js",

也就是在终端使用npm run dev就可以了，而这个命令对应的脚本就是dev-runner.js。

function init() {
   
    greeting();

    Promise.all([startRenderer(), startMain()])
        .then(() => {
            startElectron();
        })
        .catch(err => {
            console.error(err);
        });
}

这是脚本运行时执行的唯一方法，其中的greeting()就是在终端输出一个Log，如图所示：

然后做了三个操作分别启动了渲染进程、主进程和Electron：

• startRenderer()
• startMain()
• startElectron()

下面我们逐个来看具体的启动流程。

1.渲染进程启动过程分析

function startRenderer() {
   
    return new Promise((resolve, reject) => {
        //加载webpack配置文件
        rendererConfig.entry.renderer = [path.join(__dirname, 'dev-client')].concat(rendererConfig.entry.renderer);

        //创建webpack
        const compiler = webpack(rendererConfig);
        //创建webpack-hot-middleware
        hotMiddleware = webpackHotMiddleware(compiler, {
            log: false,
            heartbeat: 2500
        });

        //编译状态监控
        compiler.plugin('compilation', compilation => {
            compilation.plugin('html-webpack-plugin-after-emit', (data, cb) => {
                hotMiddleware.publish({action: 'reload'});
                cb();
            });
        });

        compiler.plugin('done', stats => {
            logStats('Renderer', stats);
        });

        //创建webpack-dev-server
        const server = new WebpackDevServer(
            compiler,
            {
                contentBase: path.join(__dirname, '../'),
                quiet: true,
                before(app, ctx) {
                    app.use(hotMiddleware);
                    ctx.middleware.waitUntilValid(() => {
                        resolve();
                    });
                }
            }
        );

        server.listen(9080);
    });
}

在这个方法里，共完成了三个操作：

• 创建webpack对象
• 利用webpack对象来创建W**ebpackDevServer对象
• 监听webpack编译过程

我们分别来看这三个操作的具体情况。

1.1.渲染进程创建webpack对象

webpack对象创建时使用的配置文件是我们分析的重点。我们来看webpack的配置文件，也就是rendererConfig变量：

rendererConfig.entry.renderer = [path.join(__dirname, 'dev-client')].concat(rendererConfig.entry.renderer);

这说明webpack的配置文件来自于两个文件：dev-client模块和rendererConfig.entry.renderer变量。
这里看一下源码就知道，concat方法连接而成的数组中包含了两个元素，一个是”dev-client”，另一个是根目录的”../src/renderer/main.js”文件，也就是说，webpack的entry参数实际上是这种形式：

entry: {
    renderer: ['dev-client', path.join(__dirname, '../src/renderer/main.js')]
},

再来看一下output参数内容（在webpack.renderer.config.js）：

output: {
    filename: '[name].js',
    libraryTarget: 'commonjs2',
    path: path.join(__dirname, '../dist/electron')
},

这种用法包含了三个信息：

• webpack将会把dev-client 模块 和main.js 文件同时打包进output指定的文件中
• dev-client是一个模块，根据源码查找，这个模块就是dev-client.js文件
• entry内容以key–value形式定义，那么output中的name变量就是entry中的key

综合来说，这种用法的作用就是：同时把dev-client.js和main.js文件打包，输出到根目录下的/dist/electron/render.js文件中。
这个信息非常重要，后面要用到。
接下来我们先来解决这两个文件的作用。

渲染进程的dev-client配置文件

这个文件内容很简单，直接贴出源码：

const