前言
本文將從vue cli項(xiàng)目中的入口文件入手酒朵，深入淺出地解析vue cli在開(kāi)發(fā)環(huán)境下的工程的運(yùn)行原理扎附。
有關(guān)vue cli 3(選讀）
本文解析采用cli 2做示例，但原理同樣適用于vue cli 3
若你是cli 3開(kāi)發(fā)者匙铡，參考本文時(shí)鳖眼，僅需注意cli 3的三點(diǎn)改動(dòng)：
cli 3內(nèi)化了項(xiàng)目默認(rèn)配置(相關(guān)文件位于node_modules/@vue/cli-service/lib/config）钦讳，開(kāi)發(fā)者可通過(guò)新增vue.config.js添加webpack配置低斋。
index.html被放到了public文件夾下
webpack配置的書(shū)寫(xiě)使用webpack-chain 風(fēng)格
建議閱讀本文時(shí)膊畴，參照你的本地文件，以加深理解稠通。
1.入口文件的概述
在vue cli構(gòu)建的項(xiàng)目中，main.js是項(xiàng)目的入口文件滋尉，定義了vue實(shí)例飞主，并引入根組件app.vue，將其掛載到index.html中id為‘a(chǎn)pp’的節(jié)點(diǎn)上碌识。
main.js:
import Vue from 'vue'
import App from './App'
/* eslint-disable no-new */
new Vue({
el: '#app', //掛載點(diǎn)
components: { App }, // 根組件
template: '<App/>'
})
注意：
vue實(shí)例掛載后，會(huì)對(duì)節(jié)點(diǎn)原內(nèi)容進(jìn)行覆蓋筏餐。所以，即便index.html和app.vue中都定義了<div id="app"></app>, 最終網(wǎng)頁(yè)也不會(huì)出現(xiàn)兩個(gè)id為app的節(jié)點(diǎn)穆律。
index.html：
<body>
<div id="app"></div>
</body>
app.vue:
<template>
<div id="app">
.....
</div>
</template>
2.問(wèn)題
main.js的作用已經(jīng)明了峦耘，但仍有三個(gè)疑問(wèn):
main.js為什么叫入口文件贡歧，什么是“入口文件”赋秀？
在運(yùn)行npm run dev后猎莲，若不做特殊設(shè)置技即，index.html實(shí)際頁(yè)面中僅掛載了app.js一個(gè)腳本，所有組件去哪兒了身笤，app.js是如何形成的液荸？
vue實(shí)例化在main.js中脱篙，但在index.html中并沒(méi)有引入main.js伤柄，main.js與index.html是如何產(chǎn)生關(guān)聯(lián)的?
3.答案：Webpack
vue cli搭建的項(xiàng)目本質(zhì)是一個(gè)集成預(yù)設(shè)置的webpack項(xiàng)目适刀。是webpack驅(qū)動(dòng)著項(xiàng)目的打包笔喉，熱重載和本地運(yùn)行硝皂。
而上述問(wèn)題都是由webpack逐一處理的：
入口文件是一個(gè)webpack概念；入口文件是webpack構(gòu)建內(nèi)部依賴(lài)圖的起點(diǎn)待侵。
app.js是由webpack打包生成的輸出文件秧倾。
而將app.js掛載到index.html這一過(guò)程是由webpack的一個(gè)插件——html-webpack-plugin完成的那先。
3.1什么是webpack
webpack 是JavaScript 應(yīng)用程序的靜態(tài)模塊打包器赡艰。當(dāng) webpack 處理應(yīng)用程序時(shí)，它會(huì)遞歸地構(gòu)建一個(gè)依賴(lài)關(guān)系圖揖闸，然后將應(yīng)用程序所需的所有模塊打包成一個(gè)或多個(gè) bundle汤纸。
3.2 webpack的核心作用
瀏覽器僅能識(shí)別html,css和js芹血，而無(wú)法識(shí)別封裝的less,vue,jsx等文件幔烛，而webpack則可以將這些文件解析打包成瀏覽器能識(shí)別的基本文件。
模塊化開(kāi)發(fā)中令蛉，我們會(huì)編寫(xiě)大量模塊言询，如果不打包就上線(xiàn)，那么頁(yè)面加載或交互時(shí)运杭，將會(huì)發(fā)起大量資源請(qǐng)求辆憔。為了性能優(yōu)化，需要使用webpack這樣的打包器對(duì)模塊進(jìn)行打包整合熊榛，以減少請(qǐng)求數(shù)玄坦。就像簡(jiǎn)單的vue項(xiàng)目绘沉，所有組件最終都將被打包到一個(gè)app.js中。
相較于無(wú)差別打包依賴(lài)模塊的傳統(tǒng)打包器车伞，webpack的核心優(yōu)勢(shì)在于它從入口文件出發(fā)另玖，遞歸構(gòu)建依賴(lài)關(guān)系圖。通過(guò)這樣的依賴(lài)梳理慷丽，webpack打包出的bundle不會(huì)包含重復(fù)或未使用的模塊盈魁，實(shí)現(xiàn)了按需打包，極大的減少了冗余赤套。
3.2 webpack配置文件
vue cli 2 在build目錄下默認(rèn)有三種場(chǎng)景配置 ——webpack.base/dev/prod.conf.js
base是基礎(chǔ)配置容握，dev/prod分別是開(kāi)發(fā)和產(chǎn)品場(chǎng)景的配置剔氏，它們?cè)趍erge基礎(chǔ)配置后追加或覆蓋相關(guān)配置竹祷。
const devWebpackConfig = merge(baseWebpackConfig, {
// 開(kāi)發(fā)環(huán)境設(shè)置
})
在運(yùn)行或打包時(shí)塑陵，會(huì)根據(jù)你的命令選擇不同的配置文件令花。腳本配置是寫(xiě)在package.json中的凉倚，如npm run dev就是使用開(kāi)發(fā)環(huán)境配置稽寒。
"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的入口文件設(shè)置
在webpack.base/webpack.dev中，vue默認(rèn)設(shè)置main.js為項(xiàng)目的唯一入口漫蛔。
在項(xiàng)目打包時(shí)莽龟，webpack會(huì)從main.js開(kāi)始構(gòu)建依賴(lài)圖锨天，梳理整個(gè)項(xiàng)目依賴(lài)且不重復(fù)的模塊病袄。
入口配置如下：
entry: {
app: './src/main.js'
},
3.3.1 入口設(shè)置延伸（選讀）
webpack的入口設(shè)置，這里不展開(kāi)講脑奠。
如果你要做多頁(yè)面項(xiàng)目宋欺，而非默認(rèn)的SPA，那么你要為每個(gè)頁(yè)面設(shè)置一個(gè)入口酸休。如果你要將app與第三方庫(kù)分離斑司，也要設(shè)置兩個(gè)入口陡厘。
這些操作可參考webpack的官方文檔
webpack官方文檔
https://www.webpackjs.com/concepts/entry-points/
如果你想要封裝自己的UI庫(kù)糙置，那么在入口部分的設(shè)置是目，你可以參考以下這篇文章懊纳。（這篇文章的其它部分并不是最佳實(shí)踐嗤疯，可行但僅供參考！以后有空再詳述組件化）
實(shí)現(xiàn)element-ui的按需引入戏罢，按需打包加載
https://segmentfault.com/a/1190000015884948
3.4 輸出文件配置
配置中還定義了項(xiàng)目的輸出設(shè)定龟糕。
在output中讲岁，你可以配置打包輸出文件的路徑缓艳，名稱(chēng)郎任，進(jìn)行分離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定義的是輸出文件的名稱(chēng)，[name]是webpack中的占位符车猬，它對(duì)應(yīng)entry中對(duì)象的鍵名霉猛。
默認(rèn)配置中僅有一個(gè)入口–app。所以珠闰，在默認(rèn)的開(kāi)發(fā)模式下惜浅，本項(xiàng)目的所有資源最終打包生成的文件就是app.js。注：在開(kāi)發(fā)模式下伏嗜，項(xiàng)目是跑在webpack-dev-server的虛擬服務(wù)器上坛悉，此時(shí)app.js僅存在于內(nèi)存中。
3.5 HtmlWebpackPlugin配置
vue的webpack默認(rèn)配置中還加入了htmlwebpackplugin插件承绸，用于生成index.html與掛載JS腳本裸影。
配置參數(shù)中：
filename是輸出文件名，
template是本地模板文件名军熏，HtmlWebpackPlugin默認(rèn)掛載的模板就是根目錄下的index.html。
inject屬性定義了js腳本加載的位置均践，默認(rèn)值true，則在body最下方加載。
你還可以添加其它參數(shù)偷办，比如網(wǎng)站圖標(biāo)favicon等，這一系列參數(shù)均可參考webpack官方文檔。
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true,
favicon:'static/img/temple.png'
})
4.總結(jié)
當(dāng)你輸入 npm run dev 后，發(fā)生了這樣一連串事件——webpack選擇了開(kāi)發(fā)配置财骨，并進(jìn)入main.js入口文件，構(gòu)建項(xiàng)目依賴(lài)圖杨蛋。webpack將整理后的所有依賴(lài)模塊打包成輸出文件app.js糠爬，接著htmlwebpackPlugin將它掛載到index.html頁(yè)面上砚亭。
最終，它呈現(xiàn)出的模樣如下所示：
————————————————
版權(quán)聲明：本文為CSDN博主「MGsniper」的原創(chuàng)文章署尤，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_36145914/article/details/86497123
