摘要:但高度封裝的帶來(lái)方便的同時(shí),很多人卻很少去關(guān)注輪子的內(nèi)部結(jié)構(gòu),以至于當(dāng)使用需要手動(dòng)配置一些東西如編譯實(shí)現(xiàn)代碼壓縮,移動(dòng)端適配等配置的時(shí)候往往無(wú)從下手。廢話不多說(shuō),下面我們來(lái)看看如何基于模仿實(shí)現(xiàn)項(xiàng)目工程化。
從零搭建vue-cli
原創(chuàng)不易,如需轉(zhuǎn)載請(qǐng)聯(lián)系作者并注明出處
vue-cli的出現(xiàn)為vue工程化前端開發(fā)工作流提供了開箱即用的構(gòu)建配置,減輕了煩人的webpack配置流程。但高度封裝的cli帶來(lái)方便的同時(shí),很多人卻很少去關(guān)注輪子的內(nèi)部結(jié)構(gòu),以至于當(dāng)使用vue-cli需要手動(dòng)配置一些東西(如編譯less,scss,實(shí)現(xiàn)代碼壓縮,移動(dòng)端適配等配置)的時(shí)候往往無(wú)從下手。廢話不多說(shuō),下面我們來(lái)看看如何基于webpack模仿vue-cli實(shí)現(xiàn)vue項(xiàng)目工程化。
如果本demo對(duì)你學(xué)習(xí)和理解vue-cli有幫助,請(qǐng)給我個(gè)star~~謝謝目錄
本demo github地址: https://github.com/hedonghui/...
1.webpack初始化及webpack周邊相關(guān)配置
2.靜態(tài)資源加載及css與處理器
3.webpack-dev-server及開發(fā)模式相關(guān)配置
4.配置vue的jsx寫法及postcss相關(guān)
5.css多帶帶分離打包
6.代碼分離及生產(chǎn)環(huán)境瀏覽器緩存相關(guān)
首先我們來(lái)看看本文章demo完成后的整體packgage.json的包依賴結(jié)構(gòu):
下面我們來(lái)對(duì)這里面的所有包作用進(jìn)行大體分析:
(本demo將不同環(huán)境webpack相關(guān)配置寫在同一個(gè)config.js,packgage.js里基本不區(qū)分dependencies devDependencies,有異與 vue-cli官方將不同環(huán)境配置分開不同文件的方式,,讀者可以根據(jù)webpack官
方文檔推薦的webpack-merge工具并參考vue-cli源碼進(jìn)行相關(guān)配置。對(duì)于學(xué)習(xí)無(wú)傷大雅)
首先新建一個(gè)文件夾,打開命令行窗口進(jìn)行 npm init 初始化
先來(lái)看看安裝的這幾個(gè)包:
1.webpack---------此處省略200字
2.vue-----------Vue包
3.css-loader--------------處理打包c(diǎn)ss文件
4.vue-loader---------------處理打包.vue文件(依賴于css-loader, vue-template-compiler)
5.vue-template-compiler ----------------處理vue模板 webpack.config.js相關(guān)配置目前我們裝了vue相關(guān)的幾個(gè)包,并在webpack.config.js里面配置了打包入口和出口相關(guān)的內(nèi)容,接著我們?nèi)ヅ渲靡韵聀ackage.json下script腳本以啟動(dòng)我們的webpack打包
細(xì)心的朋友應(yīng)該已經(jīng)發(fā)現(xiàn)了我們配置了build和dev兩個(gè)選項(xiàng)來(lái)區(qū)分生產(chǎn)環(huán)境和開發(fā)環(huán)境。其實(shí)在vue-cli或者其他的webpack相關(guān)搭建的工程中,單純的將html,css,js代碼打包到一起遠(yuǎn)遠(yuǎn)不能滿足我們的需求,因此,webpack為我們提供了豐富的插件和相關(guān)配置來(lái)實(shí)現(xiàn)代碼分割、類庫(kù)代碼與業(yè)務(wù)代碼分開打包、模塊熱替換、babel轉(zhuǎn)碼、webpack-dev-server、css預(yù)處理等相關(guān)功能。
**
下面我們逐一來(lái)看這這個(gè)東西的配置與實(shí)現(xiàn)**
cross-env由于我們的webpack.config都寫在同一個(gè)配置文件里面,在實(shí)現(xiàn)生產(chǎn)環(huán)境和開發(fā)環(huán)境中針對(duì)不同操作系統(tǒng)開發(fā)平臺(tái)的不同,我們引入cross-env來(lái)實(shí)現(xiàn)同意管理,通過(guò)在webpack.config.js中判斷是否為開發(fā)模式進(jìn)行不同的配置
webpack-dev-server 與熱更新 (一個(gè)微服務(wù)) babel以及postcss相關(guān)配置babel是一個(gè)能將jsx以及es6等轉(zhuǎn)碼成javascript代碼的轉(zhuǎn)碼工具,vue2后支持jsx寫法,我們?cè)趙ebpack中也引入babel babel-loader等相關(guān),使其能將vue中的jsx轉(zhuǎn)碼。babel相關(guān)配置在babelrc文件中,如下
在這個(gè)demo的babel配置中,我們只配置了兩個(gè)基本項(xiàng),可以對(duì)比下vue-cli中更多的相關(guān)配置
{ //這里是指明了轉(zhuǎn)碼規(guī)則env項(xiàng)是借助插件babel-preset-env,下面這個(gè)配置說(shuō)的是babel對(duì)es6,es7,es8進(jìn)行轉(zhuǎn) //碼,并且設(shè)置amd,commonjs這樣的模塊化文件,不進(jìn)行轉(zhuǎn)碼 "presets": [ ["env", { "modules": false, "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } }], "stage-2" ], // 下面這個(gè)選項(xiàng)是引用插件來(lái)處理代碼的轉(zhuǎn)換,transform-runtime用來(lái)處理全局函數(shù)和優(yōu)化babel編譯 //transform-vue-jsx 顧名思義是 transform vue-jsx to javascript //至于下面test 是提前設(shè)置的環(huán)境變量,如果沒有設(shè)置BABEL_ENV則使用NODE_ENV,如果都沒有設(shè)置默認(rèn) //就是development, instanbul是一個(gè)用來(lái)測(cè)試轉(zhuǎn)碼后代碼的工具 "plugins": ["transform-vue-jsx", "transform-runtime"], "env": { "test": { "presets": ["env", "stage-2"], "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"] } } }看暈了沒?單單一個(gè)babelrc配置文件就有那么多配置
不虛!本demo只是配置了基本重要項(xiàng)能實(shí)現(xiàn)大部分功能(其實(shí)關(guān)鍵在于讓你大體理解vue-cli這個(gè)輪子是怎么構(gòu)建起來(lái)的)
我們繼續(xù)往下看postcss.config.jspostcss.config.js主要用來(lái)配置css相關(guān)的內(nèi)容
在vue-cli里面默認(rèn)有三個(gè)插件postcss-import postcss-url autoprefixer(我這里只弄了一個(gè))
在這個(gè)文件里我們還可以配置移動(dòng)端適配相關(guān)的東西,通過(guò)引入一些插件可以自動(dòng)化為我們處理屏幕適配
問(wèn)題,具體內(nèi)容我就不在這里展開
相關(guān)文章可以看看這篇:https://www.w3cplus.com/mobil...
代碼分離以及做瀏覽器緩存webpack是一個(gè)一切以js為中心的打包工具,但是在生產(chǎn)模式中將所有東西都打包到bundlejs里面不利于做瀏覽器
緩存,類庫(kù)文件都是大牛們?cè)旖o廣大碼農(nóng)的輪子,其穩(wěn)定性高、可靠,所以在生產(chǎn)環(huán)境中可以進(jìn)行瀏覽器緩存,不必跟隨著業(yè)務(wù)代碼經(jīng)常更新,減少網(wǎng)絡(luò)請(qǐng)求資料的消耗,webpack官方為我們提供一個(gè)叫extract-text-webpack-plugin插件來(lái)分離css樣式,同時(shí)vue-cli里面還對(duì)類庫(kù)代碼(如vue.js),webpack相關(guān)代碼與我們的業(yè)務(wù)代碼進(jìn)行分離,這里起作用的是這兩個(gè)東東:new webpack.optimize.CommonsChunkPlugin() ? ? new webpack.optimize.CommonsChunkPlugin()我們來(lái)看一看本demo中production相關(guān)的配置:
最后來(lái)總結(jié)一下其實(shí)vue-cli總體上來(lái)說(shuō)是為我們配置了
開發(fā)環(huán)境下的 webpack-dev-server及熱更新babel、懶加載、樣式打包等
生產(chǎn)環(huán)境下的分離打包,多帶帶打包,根據(jù)chunkhash處理瀏覽器緩存,代碼壓縮等
當(dāng)然在vue-cli中還有關(guān)于eslint相關(guān)的代碼規(guī)范配置在本文中沒有講到(其實(shí)是不太會(huì))
最后本demo還有關(guān)于懶加載以及代碼壓縮部分需要去完善,其實(shí)簡(jiǎn)單的代碼壓縮也就幾行代碼
下面附上webpack官方文檔的小示例:至于...懶加載..我再琢磨琢磨(逃
本demo源碼在這里[ [1]: https://github.com/hedonghui/...][1]
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/107170.html
相關(guān)文章
學(xué)習(xí)Vue2.0的建議順序
摘要:官方文檔官方文檔,官方文檔永遠(yuǎn)是學(xué)習(xí)資料的第一步起步扎實(shí)的基本功。學(xué)習(xí)的新特性,理解,建議可以看看阮一峰的教程。的學(xué)習(xí)曲線會(huì)比較長(zhǎng),需要了解到的常用命令,以及和的模塊規(guī)范,的也很多,其實(shí)更多的是屬于一項(xiàng)后端語(yǔ)言。 學(xué)習(xí)Vue2.0的建議順序 注:本文是看過(guò)其他關(guān)于vue文章之后的想法,歡迎轉(zhuǎn)載,請(qǐng)注明出處。 Vue官方文檔:Vue2.0官方文檔,官方文檔永遠(yuǎn)是學(xué)習(xí)資料的第一步 起步...
基于vue-cli3.0的項(xiàng)目工程重新構(gòu)建空白版,拿來(lái)即用
摘要:寫在前面使用框架開發(fā)時(shí),很多人會(huì)選擇官方提供的腳手架,最新的已經(jīng)更新到完全無(wú)配置,只需下載就能方便的使用構(gòu)建的項(xiàng)目工程,但基礎(chǔ)的并不能滿足正常的項(xiàng)目開發(fā),在開發(fā)中我們需要根據(jù)自己的習(xí)慣和業(yè)務(wù)功能而添加些基礎(chǔ)功能。 寫在前面 使用vue框架開發(fā)時(shí),很多人會(huì)選擇vue官方提供的cli腳手架,最新的cli已經(jīng)更新到3.0完全無(wú)配置,只需下載就能方便的使用vuecli構(gòu)建的項(xiàng)目工程,但基礎(chǔ)的c...
關(guān)于Vue2一些值得推薦的文章 -- 五、六月份
摘要:五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新,歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香,消溽暑。鳥雀呼晴,侵曉窺檐語(yǔ)。葉上初陽(yáng)乾宿雨,水面清圓,一一風(fēng)荷舉。家住吳門,久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟,夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly;請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源;定時(shí)更新,歡迎 Star 一下。 蘇...
關(guān)于Vue2一些值得推薦的文章 -- 五、六月份
摘要:五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新,歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香,消溽暑。鳥雀呼晴,侵曉窺檐語(yǔ)。葉上初陽(yáng)乾宿雨,水面清圓,一一風(fēng)荷舉。家住吳門,久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟,夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly;請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源;定時(shí)更新,歡迎 Star 一下。 蘇...
發(fā)表評(píng)論
0條評(píng)論
GitCafe
男|高級(jí)講師
TA的文章
閱讀更多
#圣誕節(jié)#SugarHosts:美國(guó)/香港虛擬主機(jī)低至6折,云服務(wù)器每續(xù)費(fèi)一年送半年
閱讀 2123·2021-11-24 10:28
【C語(yǔ)言進(jìn)階】??浮點(diǎn)數(shù)在內(nèi)存中的存儲(chǔ)(IEEE754標(biāo)準(zhǔn))
閱讀 1147·2021-10-12 10:12
云主機(jī)怎么解析域名-云主機(jī)怎么綁定域名呢?
閱讀 3356·2021-09-22 15:21
#大硬盤#Servarica:2核/3G/2T HDD/100Mbps不限流量/加拿大/年付$72,
閱讀 694·2021-08-30 09:44
阿里云、騰訊云、UCloud年付百元機(jī)(上海機(jī)房1核2G內(nèi)存1Mbps帶寬云服務(wù)器)性能對(duì)比測(cè)評(píng)
閱讀 1909·2021-07-23 11:20
功能性組件和Classes有什么不同?
閱讀 1157·2019-08-30 15:56
瀏覽器滾動(dòng)條優(yōu)化
閱讀 1771·2019-08-30 15:44
HTML和CSS 入門系列(一):超鏈接、選擇器、顏色、盒模式、DIV布局、圖片
閱讀 1492·2019-08-30 13:55
<閱讀需要支付1元查看