阅读npm run dev命令后的配置项

"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

webpack.base.conf

从上往下读，发现它又引入了配置文件../config/index.js ./vue-loader.conf,还有工具类./utils.js

../config文件夹下的index.js是挺重要的一个文件，在整个vue-cli项目中起到了很关键的作用。

但是我们还是先不通读它。继续我们的webpack.base.conf文件

//这个方法的作用是 快速获取目录的绝对路径
//在整个配置文件中经常使用过到
function resolve (dir) {
  return path.join(__dirname, '..', 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: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
},

---

着重讲一下 process.env.NODE_ENV 是从哪来的...

让我们暂时回到webpack.dev.config.js，查看一下devWebpackConfig.plugins中的webpack.DefinePlugin

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

然后再转到../config/dev.env.js文件

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

看到没有，merge方法，合并了prod.env.js中的内容。

附注： 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目录，实际使用的例子如下
import HelloWorld from '@/components/HelloWorld'

接下来是常规的loader项的配置，其中 vue-loader 是这样的

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

它的options 是 vueLoaderConfig。一开始我们说过了，webpack.base.conf.js引入了./vue-loader.conf。所以./vue-loader.conf是服务于这里的

loader中经常使用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的定义

//默认返回的是~/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配置项是干什么的我就不知道了，以后再研究吧

现在webpack.base.conf.js读完了，回过头来看看 webpack.dev.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({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
用于配置css-loader、style-loader、postcss等loader....
webpack.base.conf.js中没有配置这些loader

devServer

clientLogLevel:配置日志级别
hot: 是否启动热部署
open: 是否自动在浏览器中打开网页
overlay: 错误覆盖
proxy:代理---很重要--开发常用

plugins

//定义process.env全局变量
new webpack.DefinePlugin({
   'process.env': require('../config/dev.env')
}),
new webpack.HotModuleReplacementPlugin(),
// HMR shows correct file names in console on update.
// 更新时在浏览器显示正确的名字
new webpack.NamedModulesPlugin(), 
new webpack.NoEmitOnErrorsPlugin(),
//常用：去官网了解一下它的配置项吧
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
   filename: 'index.html',
   template: 'index.html',
   inject: true
}),
// copy custom static assets
//把static目录中的内容拷贝到dist/static目录
new CopyWebpackPlugin([
   {
   from: path.resolve(__dirname, '../static'),
   to: config.dev.assetsSubDirectory,
   ignore: ['.*']
   }
])

portfinder

检测端口是否冲突，如果冲突，会自动重新分配端口