vue-cli 腳手架中 webpack 配置基礎文件詳解

作者：切圖妞

segmentfault.com/a/1190000014804826

一、前言

vue-cli是構建vue單頁應用的腳手架，輸入一串指定的命令行從而自動生成vue.js+wepack的項目模板。這其中webpack發揮了很大的作用，它使得我們的代碼模塊化，引入一些插件幫我們完善功能可以將文件打包壓縮，圖片轉base64等。後期對項目的配置使得我們對於腳手架自動生成的代碼的理解更為重要，接下來我將基於webpack3.6.0版本結合文檔將文件各個擊破，純乾料。

二、主體結構

1、package.json

項目作為一個大家庭，每個文件都各司其職。package.json來制定名單，需要哪些npm包來參與到項目中來，npm install命令根據這個配置文件增減來管理本地的安裝包。

注釋：

①、點這裡→webpack運行時的配置文檔傳送門

②、devDependencies和dependencies的區別： devDependencies裡面的插件只用於開發環境，不用於生產環境，即輔助作用，打包的時候需要，打包完成就不需要了。而dependencies是需要發布到生產環境的，自始至終都在。比如wepack等只是在開發中使用的包就寫入到devDependencies，而像vue這種項目全程依賴的包要寫入到devDependencies。

點這裡→更多安裝包文檔搜索頁傳送門

③、file-loader和url-loader的區別：以圖片為例，file-loader可對圖片進行壓縮，但是還是通過文件路徑進行引入，當http請求增多時會降低頁面性能，而url-loader通過設定limit參數，小於limit位元組的圖片會被轉成base64的文件，大於limit位元組的將進行圖片壓縮的操作。總而言之，url-loader是file-loader的上層封裝。

點這裡→file-loader 和 url-loader詳解

點這裡→file-loader文檔傳送門

點這裡→url-loader文檔傳送門

2、.postcssrc.js

注釋：

①、點這裡→postcss-import文檔傳送門

②、點這裡→postcss-url文檔傳送門

③、點這裡→autoprefixer文檔傳送門

3、.babelrc

該文件是es6解析的一個配置。

注釋：

點這裡→transform-vue-jsx文檔傳送門

點這裡→transform-runtime文檔傳送門

4、src內文件

我們開發的代碼都存放在src目錄下，根據需要我們通常會再建一些文件夾。比如pages的文件夾，用來存放頁面讓components文件夾專門做好組件的工作；api文件夾，來封裝請求的參數和方法；store文件夾，使用vuex來作為vue的狀態管理工具，我也常叫它作前端的資料庫等。

①、assets文件：腳手架自動回放入一個圖片在裡面作為初始頁面的logo。平常我們使用的時候會在裡面建立js，css，img，fonts等文件夾，作為靜態資源調用

②、components文件夾：用來存放組件，合理地使用組件可以高效地實現復用等功能，從而更好地開發項目。一般情況下比如創建頭部組件的時候，我們會新建一個header的文件夾，然後再新建一個header.vue的文件夾

③、router文件夾：該文件夾下有一個叫index.js文件，用於實現頁面的路由跳轉，具體使用請點擊→vue-router傳送門

④、App.vue：作為我們的主組件，可通過使用開放入口讓其他的頁面組件得以顯示。

⑤、main.js：作為我們的入口文件，主要作用是初始化vue實例並使用需要的插件，小型項目省略router時可放在該處

注釋：具體vue的用法可查看vue官方中文文檔傳送門

5、其他文件

①、.editorconfig：編輯器的配置文件

②、.gitignore：忽略git提交的一個文件，配置之後提交時將不會載入忽略的文件

③、index.html：頁面入口，經過編譯之後的代碼將插入到這來。

⑤、README.md：可此填寫項目介紹

⑥、node_modules：根據package.json安裝時候生成的的依賴（安裝包）

三、config文件夾

config內的文件其實是服務於build的，大部分是定義一個變數export出去。

注釋：點這裡→webpack-merge文檔傳送門

3、config/index.js

注釋：點擊→devtool文檔傳送門

四、build文件夾

1、build/build.js

該文件作用，即構建生產版本。package.json中的scripts的build就是node build/build.js，輸入命令行npm run build對該文件進行編譯生成生產環境的代碼。

注釋：

①、點這裡→ora文檔傳送門

②、點這裡→chalk文檔傳送門

③、點這裡→rimraf文檔傳送門

2、build/check-version.js

該文件用於檢測node和npm的版本，實現版本依賴

注釋：

點這裡→chalk文檔傳送門

點這裡→semver文檔傳送門

3、build/utils.js

utils是工具的意思，是一個用來處理css的文件。

注釋：

path.posix：提供對路徑方法的POSIX（可移植性操作系統介面）特定實現的訪問，即可跨平台，區別於win32。

path.join：用於連接路徑，會正確使用當前系統的路徑分隔符，Unix系統是"/"，Windows系統是""

點擊→path用法傳送門

該文件的主要作用就是處理.vue文件，解析這個文件中的每個語言塊（template、script、style),轉換成js可用的js模塊。

注釋：

①、點擊→vue-loader文檔傳送門

②、點擊→babel-loader文檔傳送門

注釋：

①、點擊→friendly-errors-webpack-plugin文檔傳送門

②、點擊→process文檔傳送門

③、點擊→babel-loader文檔傳送門

④、點擊→devtool文檔傳送門

⑤、點擊→webpack的HotModuleReplacementPlugin文檔傳送門

⑥、點擊→html-webpack-plugin文檔傳送門

五、結語

第一篇博文總在想要寫點什麼，就根據自己的經驗加查了下文檔寫了這麼一篇工具類的文章，由於有些插件有些用法會重複，所以按照文章先後寫過用法給過鏈接的插件一般在後面就省略了，有時間的建議從頭開始，如果單獨看某章節的話遇到不懂的語法或插件可全文查找，也可以點擊更多安裝包傳送門(https://www.npmjs.com/)進行查找閱讀。本文將vue本身自帶的英文注釋刪除了，但英文注釋非常有用可以仔細閱讀，希望對大家學習vue和webpack都有所幫助。

覺得本文對你有幫助？請分享給更多人

關注「前端大全」，提升前端技能

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！