如何用webpack打包electron-vue项目，实现基于长尾词的多页面入口文件配置？

本文共计710个文字，预计阅读时间需要3分钟。

项目需要在Electron项目中新建一个窗口，利用webpack作为静态资源打包器，配置多页面应用的入口。今天来分享我在Electron中使用webpack构建多页面入口的踩坑经验。

项目需要在electron的项目中新打开一个窗口，利用webpack作为静态资源打包器，发现在webpack中可以设置多页面的入口，今天来讲一下我在electron中利用webpack建立多页面入口的踩坑经验。

1、webpack的核心概念

•Entry：入口，Webpack执行构建的第一步从Entry开始；
•Module：模块，在Webpack里一切皆模块，一个模块对应着一个文件。Webpack会从配置的Entry开始递归找出所有依赖的模块。
•Chunk：代码块，一个Chunk由多个模块组合而成，用于代码合并与分割。
•Loader：模块转换器，用于把模块原内容按照需求转换成新内容。
•Plugin：扩展插件，在Webpack构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情。
•Output：输出结果，在Webpack经过一系列处理并得出最终想要的代码后输出结果。

2、配置多页面的入口文件

electron构建后的项目目录如下：

•创建新的页面

vue-cli生成的项目中只有一个main.js主入口的js文件来处理所有的vue页面，我们创建多个页面需要生成一个这个页面相对应的js文件，保存该页面中包含的内容。