从代码中看到，dev-server使用的webpack配置来自build/webpack.dev.conf.js文件（测试环境下使用的是build/webpack.prod.conf.js，这里暂时不考虑测试环境）。而build/webpack.dev.conf.js中又引用了webpack.base.conf.js，所以这里我先分析webpack.base.conf.js。
webpack.base.conf.js主要完成了下面这些事情：
配置webpack编译入口
配置webpack输出路径和命名规则
配置模块resolve规则
配置不同类型模块的处理规则
说明： 这个配置里面只配置了.js、.vue、图片、字体等几类文件的处理规则，如果需要处理其他文件可以在module.rules里面配置。
具体请看代码注释：
var path = require('path') var utils = require('./utils') var config = require('../config') var vueLoaderConfig = require('./vue-loader.conf') // 给出正确的绝对路径 function resolve (dir) { return path.join(__dirname, '..', dir) } module.exports = { // 配置webpack编译入口 entry: { app: './src/main.js' }, // 配置webpack输出路径和命名规则 output: { // webpack输出的目标文件夹路径（例如：/dist） path: config.build.assetsRoot, // webpack输出bundle文件命名格式 filename: '[name].js', // webpack编译输出的发布路径 publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath }, // 配置模块resolve的规则 resolve: { // 自动resolve的扩展名 extensions: ['.js', '.vue', '.json'], // resolve模块的时候要搜索的文件夹 modules: [ resolve('src'), resolve('node_modules') ], // 创建路径别名，有了别名之后引用模块更方便，例如 // import Vue from 'vue/dist/vue.common.js'可以写成 import Vue from 'vue' alias: { 'vue$': 'vue/dist/vue.common.js', 'src': resolve('src'), 'assets': resolve('src/assets'), 'components': resolve('src/components') } }, // 配置不同类型模块的处理规则 module: { rules: [ {// 对src和test文件夹下的.js和.vue文件使用eslint-loader test: /\.(js|vue)$/, loader: 'eslint-loader', enforce: "pre", include: [resolve('src'), resolve('test')], options: { formatter: require('eslint-friendly-formatter') } }, {// 对所有.vue文件使用vue-loader test: /\.vue$/, loader: 'vue-loader', options: vueLoaderConfig }, {// 对src和test文件夹下的.js文件使用babel-loader test: /\.js$/, loader: 'babel-loader', include: [resolve('src'), resolve('test')] }, {// 对图片资源文件使用url-loader，query.name指明了输出的命名规则 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', query: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, {// 对字体资源文件使用url-loader，query.name指明了输出的命名规则 test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', query: { limit: 10000, name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } } ] } }
build/webpack.dev.conf.js
接下来看webpack.dev.conf.js，这里面在webpack.base.conf的基础上增加完善了开发环境下面的配置，主要包括下面几件事情：
将hot-reload相关的代码添加到entry chunks
合并基础的webpack配置
使用styleLoaders
配置Source Maps
配置webpack插件
详情请看代码注释：