文章目錄
- 1.前言
- 2.webpack配置
1.前言
上一篇文章對整個專案的目錄結構進行了講解，那么這篇文章我們來說下webpack配置相關的檔案，webpack是當前最流行的構建工具，所以有必要對它進行了解！
2.webpack配置
我們先 npm run dev啟動專案,再打開瀏覽器,F12來看下請求的檔案，這里面請求了一個app.js檔案，但是查看下index.html模版里面并沒有這個檔案！其實都是webpack的功能，它會把app.js檔案自動的插入到index.html模版里面
接下來我們主要來分析下webpack配置，它的配置主要在build,還有config檔案夾里面，這么多js檔案，那么就要從入口檔案看，找到package.json檔案,里面有個script,里面是我們定義的一些腳本！并且可以借助npm script來執行命令腳本！
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js"
},
先說下webpack-dev-server，webpack-dev-server是一個本地開發工具，啟動一個本地的服務器，可以用來處理打包資源和靜態檔案的請求，并且會將打包結果放在記憶體中，在每次webpack-dev-server接受到請求時都只是將記憶體的中的打包回傳給瀏覽器（你可以通過洗掉工程中的dist目錄來驗證，你會發現即使dist目錄不存在，重繪頁面功能仍然可以正常運行 ），還有它的live-reloading功能（自動重繪）可以監聽檔案的變化，自動重繪頁面來提升開發效率的，所以webpack-dev-server一般在本地開發才會用到！
再來看"dev"和"start",那么 npm run dev 和npm run start 都是用webpack-dev-server去執行build下面的webpack.dev.conf.js配置，這個是開發環境的配置,"build"就是生產環境的配置了，所以npm run build就是node去執行 build檔案下的build.js檔案了，再分別來看下build和config下的檔案
先來看下build檔案夾的檔案，看下面：
1. build.js是構建開發的環境的腳本檔案，npm run build所執行的腳本，
2. check-versions.js是檢查npm和node的版本的腳本檔案，
3. utils.js是用于一些工具方法（生成路徑的地址），主要用于生成cssLoader和styleLoader配置的腳本，
4. vue-loader.conf.js是vue-loader的一些基本配置，里面用到utils.js的一些方法，
5. weback.base.conf.js是dev和prod環境下的基本配置，
6. weboack.dev.conf.js是dev環境的配置，
7. weboack.prod.conf.js是prod環境的配置，
再開來看下config檔案夾的檔案，看下面：
1. dev.env.js是dev環境變數配置，
2. index.js是dev和prod環境的一些基本屬性配置（我們可以根據自己的需要來更改這些配置），
3. prod.env.js 是prod環境變數配置，
我們下面來一個一個來詳細講解這些檔案,先來看check-versions.js,主要是檢查npm和node的版本的！
再來看下config下的index.js,主要是dev和prod環境的一些基本屬性配置（我們可以根據自己的需要來更改這些配置），webpack.dev.conf.js和webpack.prod.conf.js都會用到這個檔案的一些基本屬性配置！
prod.env.js是prod環境變數配置，就是一個物件，webpack.prod.conf.js也會用到這個檔案的變數！
dev.env.js是dev環境變數配置，其實也是一個物件，只不過prod環境是"production"，dev環境是"development"，webpack.dev.conf.js會用到這個檔案的變數！
webpack.base.conf.js是prod和dev的公用配置！最終生成完整的配置都要加上它！
webpack.base.conf.js用到utils.js和vue-loader.conf.js，并且vue-loader.conf.js也用到utils.js的方法，先來看下utils.js，它有生成路徑的方法和用于生成cssLoader和styleLoader配置的方法！
vue-loader.conf.js是vue-loader的一些基本配置！
webpack.dev.conf.js是dev環境的配置！
webpack.prod.conf是prod環境的配置！
最后一個是build.js檔案，這個是建構開發環境的檔案！
終于整理完了！我們下篇來說下vue全家桶的vue-router!如果覺得寫的可以，點個關注！謝謝!
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/296619.html
標籤：其他
上一篇：JavaScript 進階第七章（es6中的class ）
下一篇：定時器的運行和停止