摘要：但高度封裝的帶來(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)目工程化。

原創(chuàng)不易，如需轉(zhuǎn)載請(qǐng)聯(lián)系作者并注明出處

vue-cli的出現(xiàn)為vue工程化前端開(kāi)發(fā)工作流提供了開(kāi)箱即用的構(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及開(kāi)發(fā)模式相關(guān)配置
4.配置vue的jsx寫(xiě)法及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)配置寫(xiě)在同一個(gè)config.js，packgage.js里基本不區(qū)分dependencies devDependencies，有異與 vue-cli官方將不同環(huán)境配置分開(kāi)不同文件的方式，,讀者可以根據(jù)webpack官
方文檔推薦的webpack-merge工具并參考vue-cli源碼進(jìn)行相關(guān)配置。對(duì)于學(xué)習(xí)無(wú)傷大雅)

首先新建一個(gè)文件夾，打開(kāi)命令行窗口進(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模板