"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"

該命令讀取配置文件 webpack.dev.config.js

我們先大致瞥一眼webpack.dev.config.js,發(fā)現(xiàn)它引入了webpack基礎(chǔ)配置文件webpack.base.conf斑响。

那我們現(xiàn)在暫且跳過webpack.dev.config.js,先看看webpack.base.conf

webpack.base.conf

從上往下讀，發(fā)現(xiàn)它又引入了配置文件../config/index.js ./vue-loader.conf,還有工具類./utils.js

../config文件夾下的index.js是挺重要的一個文件，在整個vue-cli項(xiàng)目中起到了很關(guān)鍵的作用澳泵。

但是我們還是先不通讀它授翻。繼續(xù)我們的webpack.base.conf文件

//這個方法的作用是 快速獲取目錄的絕對路徑
//在整個配置文件中經(jīng)常使用過到
function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

接下來的方法 createLintingRule() 返回的是一個eslint-loader的配置項(xiàng)刚梭，在module.rules中使用重慢，如下
...(config.dev.useEslint ? [createLintingRule()] : [])
其中...三個點(diǎn)表示對象深拷貝今阳。這個方法是否被調(diào)用取決于../config/index.js中的配置項(xiàng)师溅。
現(xiàn)在你可以回過頭去看看../config/index.js中的這個屬性。記得看完后盾舌，立馬回到這里墓臭。因?yàn)槲也幌肽銏?zhí)著于../config/index.js而迷失了閱讀本文的節(jié)奏和思路。

接下來就是webpack的常規(guī)配置項(xiàng)了妖谴，因?yàn)闋砍兜膬?nèi)容得需要有webpack基礎(chǔ)窿锉。所以如果你連entry、output是什么都不知道的話窖维，建議還是先看看webpack官方文檔吧榆综。

output:

//現(xiàn)在再回過頭看一下`../config/index.js`的配置項(xiàng)吧
 output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
},

著重講一下 process.env.NODE_ENV 是從哪來的...

讓我們暫時(shí)回到webpack.dev.config.js妙痹，查看一下devWebpackConfig.plugins中的webpack.DefinePlugin

//定義process.env全局變量
new webpack.DefinePlugin({
    'process.env': require('../config/dev.env')
}),

然后再轉(zhuǎn)到../config/dev.env.js文件

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"'
})

看到?jīng)]有铸史，merge方法，合并了prod.env.js中的內(nèi)容怯伊。

附注： merge方法是 引用自 webpack-merge const merge = require('webpack-merge')

（prod.env.js）

'use strict'
module.exports = {
  NODE_ENV: '"production"'
}

于是 process.env.NODE_ENV 就誕生了...

OK,讓我們再次回到 webpack.base.conf文件琳轿。

接著看resolve

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      //可以在頁面中使用@符號表示src目錄
      '@': resolve('src'),
    }
},

resolve方法上面說過了，所以@表示的是~/src目錄，實(shí)際使用的例子如下
import HelloWorld from '@/components/HelloWorld'

接下來是常規(guī)的loader項(xiàng)的配置崭篡，其中 vue-loader 是這樣的

{
    test: /\.vue$/,
    loader: 'vue-loader',
    options: vueLoaderConfig
},

它的options 是 vueLoaderConfig挪哄。一開始我們說過了，webpack.base.conf.js引入了./vue-loader.conf琉闪。所以./vue-loader.conf是服務(wù)于這里的

loader中經(jīng)常使用utils.assetsPath()方法迹炼，例如

{
    test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
    loader: 'url-loader',
    options: {
        limit: 10000,
        name: utils.assetsPath('media/[name].[hash:7].[ext]')
    }
},

utils.assetsPath的定義

//默認(rèn)返回的是~/dist/static/_path
exports.assetsPath = function (_path) {
  const assetsSubDirectory = process.env.NODE_ENV === 'production'
    ? config.build.assetsSubDirectory
    : config.dev.assetsSubDirectory

  return path.posix.join(assetsSubDirectory, _path)
}

后面的node配置項(xiàng)是干什么的我就不知道了，以后再研究吧

現(xiàn)在webpack.base.conf.js讀完了颠毙，回過頭來看看 webpack.dev.conf.js

webpack.dev.conf.js

webpack.dev.conf.js引入的絕大多數(shù)東東斯入，我們已經(jīng)在webpack.base.conf.js中見到過了，除了webpack插件和 portfinder. portfinder沒深入了解過蛀蜜，只知道它的作用是 當(dāng)你默認(rèn)8080端口被占用時(shí)刻两，它會重新綁定一個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({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
用于配置css-loader滴某、style-loader磅摹、postcss等loader....
webpack.base.conf.js中沒有配置這些loader

devServer

clientLogLevel:配置日志級別
hot: 是否啟動熱部署
open: 是否自動在瀏覽器中打開網(wǎng)頁
overlay: 錯誤覆蓋
proxy:代理---很重要--開發(fā)常用

plugins

//定義process.env全局變量
new webpack.DefinePlugin({
   'process.env': require('../config/dev.env')
}),
new webpack.HotModuleReplacementPlugin(),
// HMR shows correct file names in console on update.
// 更新時(shí)在瀏覽器顯示正確的名字
new webpack.NamedModulesPlugin(), 
new webpack.NoEmitOnErrorsPlugin(),
//常用：去官網(wǎng)了解一下它的配置項(xiàng)吧
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
   filename: 'index.html',
   template: 'index.html',
   inject: true
}),
// copy custom static assets
//把static目錄中的內(nèi)容拷貝到dist/static目錄
new CopyWebpackPlugin([
   {
   from: path.resolve(__dirname, '../static'),
   to: config.dev.assetsSubDirectory,
   ignore: ['.*']
   }
])

portfinder

檢測端口是否沖突，如果沖突霎奢，會自動重新分配端口