前言
本文将从vue cli项目中的入口文件入手，深入浅出地解析vue cli在开发环境下的工程的运行原理。
有关vue cli 3(选读）
本文解析采用cli 2做示例，但原理同样适用于vue cli 3
若你是cli 3开发者，参考本文时，仅需注意cli 3的三点改动：
cli 3内化了项目默认配置(相关文件位于node_modules/@vue/cli-service/lib/config），开发者可通过新增vue.config.js添加webpack配置。
index.html被放到了public文件夹下
webpack配置的书写使用webpack-chain 风格
建议阅读本文时，参照你的本地文件，以加深理解。
1.入口文件的概述
在vue cli构建的项目中，main.js是项目的入口文件，定义了vue实例，并引入根组件app.vue，将其挂载到index.html中id为‘app’的节点上。
image.png
main.js:
import Vue from 'vue'
import App from './App'
/* eslint-disable no-new */
new Vue({
el: '#app', //挂载点
components: { App }, // 根组件
template: '<App/>'
})
注意：
vue实例挂载后，会对节点原内容进行覆盖。所以，即便index.html和app.vue中都定义了<div id="app"></app>, 最终网页也不会出现两个id为app的节点。
index.html：
<body>
<div id="app"></div>
</body>
app.vue:
<template>
<div id="app">
.....
</div>
</template>
image.png
2.问题
main.js的作用已经明了，但仍有三个疑问:
main.js为什么叫入口文件，什么是“入口文件”？
在运行npm run dev后，若不做特殊设置，index.html实际页面中仅挂载了app.js一个脚本，所有组件去哪儿了，app.js是如何形成的？
vue实例化在main.js中，但在index.html中并没有引入main.js，main.js与index.html是如何产生关联的?
3.答案：Webpack
vue cli搭建的项目本质是一个集成预设置的webpack项目。是webpack驱动着项目的打包，热重载和本地运行。
而上述问题都是由webpack逐一处理的：
入口文件是一个webpack概念；入口文件是webpack构建内部依赖图的起点。
app.js是由webpack打包生成的输出文件。
而将app.js挂载到index.html这一过程是由webpack的一个插件——html-webpack-plugin完成的。
3.1什么是webpack
webpack 是JavaScript 应用程序的静态模块打包器。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图，然后将应用程序所需的所有模块打包成一个或多个 bundle。
3.2 webpack的核心作用
浏览器仅能识别html,css和js，而无法识别封装的less,vue,jsx等文件，而webpack则可以将这些文件解析打包成浏览器能识别的基本文件。
模块化开发中，我们会编写大量模块，如果不打包就上线，那么页面加载或交互时，将会发起大量资源请求。为了性能优化，需要使用webpack这样的打包器对模块进行打包整合，以减少请求数。就像简单的vue项目，所有组件最终都将被打包到一个app.js中。
相较于无差别打包依赖模块的传统打包器，webpack的核心优势在于它从入口文件出发，递归构建依赖关系图。通过这样的依赖梳理，webpack打包出的bundle不会包含重复或未使用的模块，实现了按需打包，极大的减少了冗余。
image.png
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页面上。
最终，它呈现出的模样如下所示：
image.png
————————————————
版权声明：本文为CSDN博主「MGsniper」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_36145914/article/details/86497123
网友评论