Vue | vue cli入口文件解析

曾经终败给现在 2023-07-15 09:06 62阅读 0赞

### **作者：MGsniper   链接：https://blog.csdn.net/qq\_36145914/article/details/86497123   来源：CSDN。** ###

# 前言 #

本文将从vue cli项目中的入口文件入手，深入浅出地解析vue cli在**开发环境下**的工程的运行原理。

# 有关vue cli 3(选读） #

**本文解析采用cli 2做示例，但原理同样适用于vue cli 3**  
若你是cli 3开发者，参考本文时，仅需注意cli 3的三点改动：

1.  cli 3内化了项目默认配置(相关文件位于node\_modules/@vue/cli-service/lib/config），开发者可通过新增vue.config.js添加webpack配置。
2.  index.html被放到了public文件夹下
3.  webpack配置的书写使用webpack-chain 风格

**建议阅读本文时，参照你的本地文件，以加深理解。**

# 1.入口文件的概述 #

*  在vue cli构建的项目中，**main.js是项目的入口文件**，定义了vue实例，并引入**根组件app.vue**，将其**挂载到index.html**中id为‘app’的节点上。  
    ![format_png][]  
    main.js:

import Vue from 'vue'
    import App from './App'
    new Vue({
      el: '#app', //挂载点
      components: { App }, // 根组件
      template: '<App/>'
    })

*  注意：  
    vue实例挂载后，会**对节点原内容进行覆盖**。所以，即便index.html和app.vue中都定义了 `<divid="app"></app>`, 最终网页也不会出现两个id为app的节点。

index.html：

app.vue:

![format_png 1][]

# 2.问题 #

main.js的作用已经明了，但仍有三个疑问:

1.  main.js为什么叫入口文件，**什么是“入口文件”**？
2.  在运行npm run dev后，若不做特殊设置，index.html实际页面中仅挂载了app.js一个脚本，所有组件去哪儿了，**app.js是如何形成的**？
3.  vue实例化在main.js中，但在index.html中并没有引入main.js，**main.js与index.html是如何产生关联的**?

# 3.答案：Webpack #

vue cli搭建的项目本质是一个集成预设置的**webpack项目**。是webpack驱动着项目的打包，热重载和本地运行。  
而上述问题都是由**webpack逐一处理**的：

1.  入口文件是一个webpack概念；**入口文件是webpack构建内部依赖图的起点**。
2.  app.js是由webpack打包生成的**输出文件**。
3.  而将app.js挂载到index.html这一过程是由webpack的一个插件——**html-webpack-plugin**完成的。

## 3.1什么是webpack ##

webpack 是JavaScript 应用程序的静态模块打包器。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图，然后将应用程序所需的所有模块打包成一个或多个 bundle。

## 3.2 webpack的核心作用 ##

1.  浏览器仅能识别html,css和js，而无法识别封装的less,vue,jsx等文件，而webpack则可以将这些文件解析打包成浏览器能识别的基本文件。
2.  模块化开发中，我们会编写大量模块，如果不打包就上线，那么页面加载或交互时，将会发起大量资源请求。为了性能优化，需要使用webpack这样的打包器**对模块进行打包整合，以减少请求数**。就像简单的vue项目，所有组件最终都将被打包到一个app.js中。
3.  相较于无差别打包依赖模块的传统打包器，webpack的核心优势在于它**从入口文件出发，递归构建依赖关系图**。通过这样的依赖梳理，webpack打包出的bundle**不会包含重复或未使用的模块**，实现了**按需打包**，极大的减少了冗余。  
    ![format_png 2][]

## 3.2 webpack配置文件 ##

vue cli 2 在build目录下默认有三种场景配置 ——**webpack.base/dev/prod.conf.js**  
base是基础配置，dev/prod分别是开发和产品场景的配置，它们在**merge基础配置**后追加或覆盖相关配置。

const devWebpackConfig = merge(baseWebpackConfig, {
            //  开发环境设置
    })

在运行或打包时，会根据你的命令选择不同的配置文件。脚本配置是写在**package.json**中的，如npm run dev就是使用开发环境配置。

"scripts": {
        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
        "start": "npm run dev",
        "build": "node build/build.js"
      }

一份配置包含了入口文件，输出和各种插件的配置。

## 3.3 vue的入口文件设置 ##

在webpack.base/webpack.dev中，vue默认设置main.js为项目的唯一入口。  
在项目打包时，webpack会从main.js开始构建依赖图，梳理整个项目依赖且不重复的模块。  
入口配置如下：

entry: {
        app: './src/main.js'
      },

### 3.3.1 入口设置延伸（选读） ###

webpack的入口设置，这里不展开讲。  
如果你要做多页面项目，而非默认的SPA，那么你要为每个页面设置一个入口。如果你要将app与第三方库分离，也要设置两个入口。  
这些操作可参考webpack的官方文档

> webpack官方文档  
> https://www.webpackjs.com/concepts/entry-points/

如果你想要封装自己的UI库，那么在入口部分的设置，你可以参考以下这篇文章。（这篇文章的其它部分并不是最佳实践，可行但仅供参考！以后有空再详述组件化）

> 实现element-ui的按需引入，按需打包加载  
> https://segmentfault.com/a/1190000015884948

## 3.4 输出文件配置 ##

配置中还定义了项目的输出设定。  
在output中，你可以配置打包输出文件的路径，名称，进行分离js/css等操作。

// webpack.base.conf
      output: {
        path: config.build.assetsRoot,
        filename: '[name].js',
        publicPath: process.env.NODE_ENV === 'production'
          ? config.build.assetsPublicPath
          : config.dev.assetsPublicPath
      },

这里只讲一下 filename 这一属性：  
filename定义的是输出文件的名称，\[name\]是webpack中的占位符，它对应**entry中对象的键名**。  
默认配置中仅有一个入口–app。所以，在默认的开发模式下，本项目的所有资源最终打包生成的文件就是**app.js**。注：在开发模式下，项目是跑在webpack-dev-server的虚拟服务器上，此时app.js仅存在于内存中。

## 3.5 HtmlWebpackPlugin配置 ##

vue的webpack默认配置中还加入了htmlwebpackplugin插件，用于生成index.html与挂载JS脚本。  
配置参数中：  
filename是输出文件名，  
template是本地模板文件名，HtmlWebpackPlugin默认挂载的模板就是根目录下的**index.html**。  
**inject属性**定义了js脚本加载的位置，默认值true，则在body最下方加载。  
你还可以添加其它参数，比如网站图标favicon等，这一系列参数均可参考webpack官方文档。

new HtmlWebpackPlugin({
          filename: 'index.html',
          template: 'index.html',
          inject: true,
          favicon:'static/img/temple.png'
        })

# 4.总结 #

当你输入 npm run dev 后，发生了这样一连串事件——webpack选择了开发配置，并进入**main.js入口文件**，构建项目依赖图。webpack将整理后的所有依赖模块打包成**输出文件app.js**，接着htmlwebpackPlugin将它挂载到index.html页面上。  
最终，它呈现出的模样如下所示：  
![format_png 1][]

[format_png]: /images/20230528/0e76170e3b17433e88cd647d19e30764.png
[format_png 1]: /images/20230528/e547ee6eee3647469b7194f0396fee22.png
[format_png 2]: /images/20230528/a77185de47f84f7390357f5502991079.png