webpackentry

webpack多入口作用

Entry

入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。

进入入口起点后,webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

每个依赖项随即被处理,最后输出到称之为 bundles 的文件中。

webpack原理解析

1.webpack核心概念：

entry： 一个可执行模块或库的入口文件。

chunk ：多个文件组成的一个代码块，例如把一个可执行模块和它所有依赖的模块组合和一个 chunk 这体现了webpack的打包机制。

loader ：文件转换器，例如把es6转换为es5，scss转换为css。

plugin ：插件，用于扩展webpack的功能，在webpack构建生命周期的节点上加入扩展hook为webpack加入功能。

2.webpack构建流程（原理）：

从启动webpack构建到输出结果经历了一系列过程，它们是：

2.1 解析webpack配置参数，合并从shell传入和webpack.config.js文件里配置的参数，生产最后的配置结果。

2.2 注册所有配置的插件，好让插件监听webpack构建生命周期的事件节点，以做出对应的反应。

2.3 从配置的entry入口文件开始解析文件构建AST语法树，找出每个文件所依赖的文件，递归下去。

2.4 在解析文件递归的过程中根据文件类型和loader配置找出合适的loader用来对文件进行转换。

2.5 递归完后得到每个文件的最终结果，根据entry配置生成代码块chunk。

2.6 输出所有chunk到文件系统。

elementplus的js文件太大如何拆分

要拆分Element Plus的JS文件，可以按照以下步骤进行：
1. 使用Webpack或其他构建工具，将JS文件按照模块进行拆分。可以根据需要将不同功能的模块分开成多个文件，例如将表单组件的代码拆分到一个文件，将表格组件的代码拆分到另一个文件等。
2. 如果使用的是Webpack，可以使用Code Splitting功能来实现模块的拆分。可以通过配置Webpack的entry和output选项，将不同的模块打包为多个文件。
3. 可以使用异步加载（Async Loading）的方式加载模块。在需要使用某个模块的时候再进行加载，可以减少初始加载的文件大小。可以使用Webpack的import函数或者动态import语法实现异步加载。
4. 对于一些通用的代码，可以将其打包为单独的共享模块（Shared Module），通过引入共享模块的方式来减少重复代码的体积。
5. 使用Tree Shaking技术，去除没有使用到的代码。如果只需要使用Element Plus中的部分组件，可以使用Tree Shaking将未使用的组件的代码去除，从而减小文件大小。
请注意，拆分文件可能会增加网络请求和加载时间，需要根据实际情况进行权衡。