"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"
該命令讀取配置檔案webpack.dev.config.js
我們先大致瞥一眼webpack.dev.config.js,發現它引入了webpack基礎配置檔案webpack.base.conf。
那我們現在暫且跳過webpack.dev.config.js,先看看webpack.base.conf
從上往下讀，發現它又引入了配置檔案../config/index.js ./vue-loader.conf,還有工具類./utils.js
../config資料夾下的index.js是挺重要的乙個檔案，在整個vue-cli專案中起到了很關鍵的作用。
但是我們還是先不通讀它。繼續我們的webpack.base.conf檔案
//這個方法的作用是 快速獲取目錄的絕對路徑
//在整個配置檔案中經常使用過到
function resolve (dir)
createlintingrule()返回的是乙個eslint-loader的配置項，在module.rules中使用，如下
...(config.dev.useeslint ? [createlintingrule()] : )
其中...三個點表示物件深拷貝。這個方法是否被呼叫取決於../config/index.js中的配置項。
現在你可以回過頭去看看../config/index.js中的這個屬性。記得看完後，立馬回到這裡。因為我不想你執著於../config/index.js而迷失了閱讀本文的節奏和思路。
接下來就是webpack的常規配置項了，因為牽扯的內容得需要有webpack基礎。所以如果你連entry、output是什麼都不知道的話，建議還是先看看webpack官方文件吧。
output:
//現在再回過頭看一下`../config/index.js`的配置項吧
output: ,
著重講一下 process.env.node_env 是從哪來的...
讓我們暫時回到webpack.dev.config.js，檢視一下devwebpackconfig.plugins中的webpack.defineplugin
//定義process.env全域性變數
new webpack.defineplugin(),
然後再轉到../config/dev.env.js檔案
module.exports = merge(prodenv, )看到沒有，merge方法，合併了prod.env.js中的內容。
附註： merge方法是 引用自 webpack-mergeconst merge = require('webpack-merge')
（prod.env.js）
'use strict'
module.exports =
於是 process.env.node_env 就誕生了...ok,讓我們再次回到
webpack.base.conf檔案。
接著看resolve
resolve:
},
~/src目錄，實際使用的例子如下
import helloworld from '@/components/helloworld'
接下來是常規的loader項的配置，其中 vue-loader 是這樣的
,loader中經常使用utils.assetspath()方法，例如
},
//預設返回的是~/dist/static/_path
exports.assetspath = function (_path)
現在webpack.base.conf.js讀完了，回過頭來看看 webpack.dev.conf.js
webpack.dev.conf.js引入的絕大多數東東，我們已經在webpack.base.conf.js中見到過了，除了webpack外掛程式和 portfinder. portfinder沒深入了解過，只知道它的作用是 當你預設8080埠被占用時，它會重新繫結乙個8081埠。
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const path = require('path')
const basewebpackconfig = require('./webpack.base.conf')
const copywebpackplugin = require('copy-webpack-plugin')
const htmlwebpackplugin = require('html-webpack-plugin')
const friendlyerrorsplugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')
rules: utils.styleloaders()
用於配置css-loader、style-loader、postcss等loader....
webpack.base.conf.js中沒有配置這些loader
clientloglevel:配置日誌級別
hot: 是否啟動熱部署
open: 是否自動在瀏覽器中開啟網頁
overlay: 錯誤覆蓋
proxy:**---很重要--開發常用
//定義process.env全域性變數
new webpack.defineplugin(),
new webpack.hotmodulereplacementplugin(),
// hmr shows correct file names in console on update.
// 更新時在瀏覽器顯示正確的名字
new webpack.namedmodulesplugin(),
new webpack.noemitonerrorsplugin(),
//常用：去官網了解一下它的配置項吧
// new htmlwebpackplugin(),
// copy custom static assets
//把static目錄中的內容拷貝到dist/static目錄
new copywebpackplugin([
])
npm run dev時遇到的問題
第一篇部落格 npm run dev時 19 verbose npm v6.14.4 20 error code elifecycle 21 error errno 1 22 error vue admin template 4.2 1 dev vue cli service serve 22 er...
vue的npm run dev做了什麼
二 config資料夾分析 三 vue專案工程中執行npm run dev 命令之後執行了哪些操作 build build.js check versions.js dev client.js dev server.js utils.js vue loader.conf.js webpack.bas...
閱讀《構建之法》後的相關問題
問題一 在團隊開發中，每個人的性格也不盡相同，有人喜歡把事情盡早做出來，但也有人喜歡把事情放在後面，拖到最後，出現兩極分化這樣就會產生衝突 工作進展緩慢 合作不愉快等，那要如何協調和解決這件事，從而保證團隊的高度團結和團隊開發的效率？對於這個問題，鄒欣老師在構建之法中也給出了答案。鄒欣老師提出了多種...