Vue | vue cli入口文件解析（main.js,app.vue,index.html webpack）
目录
前言
有关vue cli 3(选读）
1.入口文件的概述 2.问题 3.答案：Webpack 3.1什么是webpack 3.2 webpack的核心作用 3.2 webpack配置文件 3.3 vue的入口文件设置 3.3.1 入口设置延伸（选读） 3.4 输出文件配置 3.5 HtmlWebpackPlugin配置 4.总结
若有疑问，欢迎评论，我会尽快回复。
前言
本文将从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’的节点上。
main.js:
1 import Vue from 'vue' 2 import App from './App' 3 /* eslint-disable no-new */ 4 new Vue({ 5 el: ‘#app’, //挂载点 6 components: { App }, // 根组件 7 template: ‘<App/>’ 8 })
注意：
vue实例挂载后，会对节点原内容进行覆盖。所以，即便index.html和app.vue中都定义了<div id="app"></app>, 最终网页也不会出现两个id为app的节点。
index.html：
1 <body> 2 <div id="app"></div> 3 </body>
app.vue:
<template> <div id="app"> ..... </div> </template>
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不会包含重复或未使用的模块，实现了按需打包，极大的减少了冗余。
3.2 webpack配置文件
vue cli 2 在build目录下默认有三种场景配置 ——webpack.base/dev/prod.conf.js
base是基础配置，dev/prod分别是开发和产品场景的配置，它们在merge基础配置后追加或覆盖相关配置。
1 const devWebpackConfig = merge(baseWebpackConfig, { 2 // 开发环境设置 3 })
在运行或打包时，会根据你的命令选择不同的配置文件。脚本配置是写在package.json中的，如npm run dev就是使用开发环境配置。
1 "scripts": { 2 "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", 3 "start": "npm run dev", 4 }
一份配置包含了入口文件，输出和各种插件的配置。
3.3 vue的入口文件设置
在webpack.base/webpack.dev中，vue默认设置main.js为项目的唯一入口。
在项目打包时，webpack会从main.js开始构建依赖图，梳理整个项目依赖且不重复的模块。
入口配置如下：
1 entry: { 2 app: './src/main.js' 3 },
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等操作。
1 // webpack.base.conf 2 output: { 3 path: config.build.assetsRoot, 4 filename: '[name].js', 5 publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath 6 },
这里只讲一下 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官方文档。
1 new HtmlWebpackPlugin({ 2 filename: 'index.html', 3 template: 'index.html', 4 inject: true, 5 favicon:'static/img/temple.png' 6 })
4.总结
当你输入 npm run dev 后，发生了这样一连串事件——webpack选择了开发配置，并进入main.js入口文件，构建项目依赖图。webpack将整理后的所有依赖模块打包成输出文件app.js，接着htmlwebpackPlugin将它挂载到index.html页面上。
最终，它呈现出的模样如下所示：
原文链接：https://blog.csdn.net/u014481405/article/details/106669366
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。
浙公网安备 33010602011771号