你好

---

一、組件

使用組件中我們可以獲得非常多的特性：

1. 代碼的高亮；
2. ES6、CommonJS的模塊化能力；
3. 組件作用域的CSS；
4. 可以使用預(yù)處理器來構(gòu)建更加豐富的組件，比如TypeScript、Babel、Less、Sass等

二、如何支持SFC

????????事實(shí)上隨著前端的快速發(fā)展，目前前端的開發(fā)越來越復(fù)雜了，比如我們需要通過 模塊化開發(fā) ，比如使用 高級(jí)的特性 來加快我么開發(fā)效率或者安全性，比如通過 es6 、ts 開發(fā)腳本邏輯，通過 cass、less 登方式來編寫css樣式；比如開發(fā)過程中，我們還希望 實(shí)時(shí)的監(jiān)聽文件的變化并反映到瀏覽器上 ，提升開發(fā)效率 ； 比如開發(fā)完成吼 需要將代碼壓縮、合并登其他優(yōu)化 。 瀏覽器只能識(shí)別js 代碼，但是不能解析這個(gè)模板，如果我們想要使用這一的SFC的.vue文件，比較常見的是兩種方式：

1. 使用Vue CLI來創(chuàng)建項(xiàng)目，項(xiàng)目會(huì)默認(rèn)幫助我們配置好所有的配置選項(xiàng)，可以在其中直接使用.vue文件；
2. 自己使用webpack或rollup或vite這類打包工具，對其進(jìn)行打包處理；

很多開發(fā)者來說，并不需要思考這種問題，因?yàn)椴还苁莢ue react angular 都是借助腳手架cli幫我們打包的，事實(shí)上cli實(shí)際上是基于webpack 搭建的

三、webpack 打包工具

webpack 是一個(gè)靜態(tài)的 模塊化 打包 工具，為現(xiàn)代的 javaScript 應(yīng)用程序

1. 打包bundler : webpack可以將幫助我們進(jìn)行打包，所以它是一個(gè)打包工具
2. 靜態(tài)的static : 這樣表述的原因是我們最終可以將代碼打包成最終的靜態(tài)資源(部署到靜態(tài)服務(wù)器)
3. 模塊化module : webpack默認(rèn)支持各種模塊化開發(fā)，ES Module、CommonJS、AMD等
4. 現(xiàn)代的modern : 我們前端說過，正是因?yàn)楝F(xiàn)代前端開發(fā)面臨各種各樣的問題，才催生了webpack的出現(xiàn)和發(fā)展

比如說vue 需要哪些打包呢？

1. js 打包：es6轉(zhuǎn)化為es5 ，ts轉(zhuǎn)化為 js
2. css處理： css模塊的加載，處理；less sass 等預(yù)處理器的處理
3. 資源文件img,font ： 加載
4. html：打包

package.jsom

????????隨著前端由多頁面到單頁面，由零散的文件到模塊化開發(fā)，在每個(gè)項(xiàng)目中，都會(huì)用到打包工具，比如在使用 webpack，但是他實(shí)際上他就是一個(gè) 包 。在開發(fā)里，我們肯定不止一個(gè)包，包怎么進(jìn)行管理呢？ package.json 文件其實(shí)就是 包管理工具 ，對項(xiàng)目或者模塊包的描述，里面包含許多元信息。比如項(xiàng)目名稱，項(xiàng)目版本，項(xiàng)目執(zhí)行入口文件，項(xiàng)目貢獻(xiàn)者等等。npm install 命令會(huì)根據(jù)這個(gè)文件下載所有依賴模塊。

webpack 依賴于node環(huán)境，他是js編寫的

webpack.config.js

????????可以在這個(gè)文件里配置一些webpack 的相關(guān)信息

四、webpack 依賴圖

1. 事實(shí)上webpack 在處理應(yīng)用程序時(shí)，會(huì)根據(jù)命令或者配置文件找到入口文件
2. 從入口開始，會(huì)生成一個(gè) 依賴關(guān)系圖 ， 這個(gè)依賴圖包括應(yīng)用程序中所需的所有模塊（js,css，img,font…）
3. 然后遍歷圖結(jié)構(gòu)，打包一個(gè)個(gè)模塊（根據(jù)文件的不同，使用不同的loader來解析）
4. 不會(huì)產(chǎn)生依賴沖突，如果已經(jīng)加載過的會(huì)有個(gè)標(biāo)記不會(huì)再次加載
   

五、webpack 代碼分包