从npm run dev开始

1. 开始运行了dev-server.js 首先检查版本 check-version.js，用到了三个模块：chalk（命令行字符串颜色化），semver(检查当前版本是否符合给定版本要求），shelljs（运行js命令行脚本）,其中版本配置在package.json中的engines字段。

2. 获取config目录,该目录文件结构为index.js prod.env.js dev.env.js存放所有的环境配置。其中在dev.env.js中用到了webpack-merge模块。

   build: {
       env: require('./prod.env'),
       index: path.resolve(__dirname, '../dist/index.html'),
       assetsRoot: path.resolve(__dirname, '../dist'),
       assetsSubDirectory: 'static',
       assetsPublicPath: '/',
       productionSourceMap: true,
       // Gzip off by default as many popular static hosts such as
       // Surge or Netlify already gzip all static assets for you.
       // Before setting to `true`, make sure to:
       // npm install --save-dev compression-webpack-plugin
       productionGzip: false,
       productionGzipExtensions: ['js', 'css'],
       // Run the build command with an extra argument to
       // View the bundle analyzer report after build finishes:
       // `npm run build --report`
       // Set to `true` or `false` to always turn it on or off
       bundleAnalyzerReport: process.env.npm_config_report
     },
     dev: {
       env: require('./dev.env'),
       port: process.env.PORT || 8080,
       autoOpenBrowser: true,
       assetsSubDirectory: 'static',
       assetsPublicPath: '/',
       proxyTable: {},
       // CSS Sourcemaps off by default because relative paths are "buggy"
       // with this option, according to the CSS-Loader README
       // (https://github.com/webpack/css-loader#sourcemaps)
       // In our experience, they generally work as expected,
       // just be aware of this issue when enabling this option.
       cssSourceMap: false
     }
   

3. 安装opn,express,express等热服务器和wenpack相关的模块，配置wenpack环境。

   const opn = require('opn')
   const path = require('path')
   const express = require('express')
   const webpack = require('webpack')
   const proxyMiddleware = require('http-proxy-middleware')
   const webpackConfig = require('./webpack.dev.conf')
   

   下面处理下webpack.dev.conf的问题：其实总共有三个文件webpack.dev.conf.js,webpack.prod.conf.js,webapck.base.conf.js.
   关于webpack.dev.conf.js 获取了webpack.base.conf.js,使用webpack-merge合并配置，同时使用utils模块来指定css的解析。这部分其实就要用到我们的webpack知识了。以后跟webpack相关的扩展基本上全在这三个文件中。

待解决问题： npm 传参问题

使用的模块

webpack系列

1. html-webpack-plugin
2. webpack-merge
3. friendly-errors-webpack-plugin
4. extract-text-webpack-plugin