資訊專欄INFORMATION COLUMN
摘要：但高度封裝的帶來方便的同時，很多人卻很少去關注輪子的內部結構，以至于當使用需要手動配置一些東西如編譯實現代碼壓縮，移動端適配等配置的時候往往無從下手。廢話不多說，下面我們來看看如何基于模仿實現項目工程化。
從零搭建vue-cli
原創不易，如需轉載請聯系作者并注明出處
vue-cli的出現為vue工程化前端開發工作流提供了開箱即用的構建配置，減輕了煩人的webpack配置流程。但高度封裝的cli帶來方便的同時，很多人卻很少去關注輪子的內部結構，以至于當使用vue-cli需要手動配置一些東西（如編譯less,scss,實現代碼壓縮，移動端適配等配置）的時候往往無從下手。廢話不多說，下面我們來看看如何基于webpack模仿vue-cli實現vue項目工程化。
如果本demo對你學習和理解vue-cli有幫助，請給我個star~~謝謝目錄
本demo github地址: https://github.com/hedonghui/...
1.webpack初始化及webpack周邊相關配置
2.靜態資源加載及css與處理器
3.webpack-dev-server及開發模式相關配置
4.配置vue的jsx寫法及postcss相關
5.css多帶帶分離打包
6.代碼分離及生產環境瀏覽器緩存相關
首先我們來看看本文章demo完成后的整體packgage.json的包依賴結構：
下面我們來對這里面的所有包作用進行大體分析：
(本demo將不同環境webpack相關配置寫在同一個config.js，packgage.js里基本不區分dependencies devDependencies，有異與 vue-cli官方將不同環境配置分開不同文件的方式，,讀者可以根據webpack官
方文檔推薦的webpack-merge工具并參考vue-cli源碼進行相關配置。對于學習無傷大雅)
首先新建一個文件夾，打開命令行窗口進行 npm init 初始化
先來看看安裝的這幾個包：
1.webpack---------此處省略200字webpack.config.js相關配置
2.vue-----------Vue包
3.css-loader--------------處理打包css文件
4.vue-loader---------------處理打包.vue文件(依賴于css-loader, vue-template-compiler)
5.vue-template-compiler ----------------處理vue模板
目前我們裝了vue相關的幾個包，并在webpack.config.js里面配置了打包入口和出口相關的內容，接著我們去配置以下package.json下script腳本以啟動我們的webpack打包
細心的朋友應該已經發現了我們配置了build和dev兩個選項來區分生產環境和開發環境。其實在vue-cli或者其他的webpack相關搭建的工程中，單純的將html,css,js代碼打包到一起遠遠不能滿足我們的需求，因此，webpack為我們提供了豐富的插件和相關配置來實現代碼分割、類庫代碼與業務代碼分開打包、模塊熱替換、babel轉碼、webpack-dev-server、css預處理等相關功能。
**
下面我們逐一來看這這個東西的配置與實現**
cross-env由于我們的webpack.config都寫在同一個配置文件里面，在實現生產環境和開發環境中針對不同操作系統開發平臺的不同，我們引入cross-env來實現同意管理，通過在webpack.config.js中判斷是否為開發模式進行不同的配置
webpack-dev-server 與熱更新 (一個微服務) babel以及postcss相關配置babel是一個能將jsx以及es6等轉碼成javascript代碼的轉碼工具，vue2后支持jsx寫法，我們在webpack中也引入babel babel-loader等相關，使其能將vue中的jsx轉碼。babel相關配置在babelrc文件中，如下
在這個demo的babel配置中，我們只配置了兩個基本項，可以對比下vue-cli中更多的相關配置
{
//這里是指明了轉碼規則env項是借助插件babel-preset-env，下面這個配置說的是babel對es6,es7,es8進行轉
//碼，并且設置amd,commonjs這樣的模塊化文件，不進行轉碼
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
// 下面這個選項是引用插件來處理代碼的轉換，transform-runtime用來處理全局函數和優化babel編譯
//transform-vue-jsx 顧名思義是 transform vue-jsx to javascript
//至于下面test 是提前設置的環境變量，如果沒有設置BABEL_ENV則使用NODE_ENV，如果都沒有設置默認
//就是development, instanbul是一個用來測試轉碼后代碼的工具
"plugins": ["transform-vue-jsx", "transform-runtime"],
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
}
}
}
看暈了沒？單單一個babelrc配置文件就有那么多配置
不虛！本demo只是配置了基本重要項能實現大部分功能(其實關鍵在于讓你大體理解vue-cli這個輪子是怎么構建起來的)
我們繼續往下看postcss.config.js
postcss.config.js主要用來配置css相關的內容
在vue-cli里面默認有三個插件postcss-import postcss-url autoprefixer（我這里只弄了一個）
在這個文件里我們還可以配置移動端適配相關的東西，通過引入一些插件可以自動化為我們處理屏幕適配
問題，具體內容我就不在這里展開
相關文章可以看看這篇：https://www.w3cplus.com/mobil...
代碼分離以及做瀏覽器緩存webpack是一個一切以js為中心的打包工具，但是在生產模式中將所有東西都打包到bundlejs里面不利于做瀏覽器
緩存,類庫文件都是大牛們造給廣大碼農的輪子，其穩定性高、可靠，所以在生產環境中可以進行瀏覽器緩存，不必跟隨著業務代碼經常更新，減少網絡請求資料的消耗，webpack官方為我們提供一個叫extract-text-webpack-plugin插件來分離css樣式，同時vue-cli里面還對類庫代碼（如vue.js），webpack相關代碼與我們的業務代碼進行分離，這里起作用的是這兩個東東：new webpack.optimize.CommonsChunkPlugin() ? ? new webpack.optimize.CommonsChunkPlugin()
我們來看一看本demo中production相關的配置:
最后來總結一下
其實vue-cli總體上來說是為我們配置了
開發環境下的 webpack-dev-server及熱更新babel、懶加載、樣式打包等
生產環境下的分離打包，多帶帶打包，根據chunkhash處理瀏覽器緩存,代碼壓縮等
當然在vue-cli中還有關于eslint相關的代碼規范配置在本文中沒有講到(其實是不太會)
最后本demo還有關于懶加載以及代碼壓縮部分需要去完善，其實簡單的代碼壓縮也就幾行代碼
下面附上webpack官方文檔的小示例：
至于...懶加載..我再琢磨琢磨（逃
本demo源碼在這里[ [1]: https://github.com/hedonghui/...][1]
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107170.html
摘要：官方文檔官方文檔，官方文檔永遠是學習資料的第一步起步扎實的基本功。學習的新特性，理解，建議可以看看阮一峰的教程。的學習曲線會比較長，需要了解到的常用命令，以及和的模塊規范，的也很多，其實更多的是屬于一項后端語言。 學習Vue2.0的建議順序 注：本文是看過其他關于vue文章之后的想法，歡迎轉載，請注明出處。 Vue官方文檔：Vue2.0官方文檔，官方文檔永遠是學習資料的第一步 起步...
摘要：寫在前面使用框架開發時，很多人會選擇官方提供的腳手架，最新的已經更新到完全無配置，只需下載就能方便的使用構建的項目工程，但基礎的并不能滿足正常的項目開發，在開發中我們需要根據自己的習慣和業務功能而添加些基礎功能。 寫在前面 使用vue框架開發時，很多人會選擇vue官方提供的cli腳手架，最新的cli已經更新到3.0完全無配置，只需下載就能方便的使用vuecli構建的項目工程，但基礎的c...
摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...
摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...
閱讀 2111·2021-11-24 10:28
閱讀 1115·2021-10-12 10:12
閱讀 3337·2021-09-22 15:21
閱讀 679·2021-08-30 09:44
閱讀 1895·2021-07-23 11:20
閱讀 1147·2019-08-30 15:56
閱讀 1751·2019-08-30 15:44
閱讀 1483·2019-08-30 13:55
