webpack配置解读1（webpack.dev.conf）

```

* 开发环境的配置
* */

//这个插件可以自动生成html，获取在已存在的html插入css、js等
var HtmlWebpackPlugin = require('html-webpack-plugin')
//自动打开浏览器插件
var OpenBrowserPlugin = require('open-browser-webpack-plugin')
// webpack-merge插件提供合并功能，将多个对象合并创建一个新对象。
// 引入friendly-errors-webpack-plugin插件
// 更好的识别webpack错误并提供更好的开发体验
var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
var merge = require('webpack-merge')
//引入webpack模块
var webpack = require('webpack');
// 引入path模块
var path = require('path');
//引入小工具
var utils = require('../config/utils');

//引入基本配置
var baseWebpackConfig = require('./webpack.config');
//引入常用配置
var config = require('../config/index')

var env = require('../config/dev.env');


module.exports = merge(baseWebpackConfig,{
    module: {
      rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMa