webpack配置项
上一节我们已经看了整个目录结构，在package.json中script有两个配置项，dev和build分别是执行build/dev-server.js,和node build/build.js
"scripts": { "dev": "node build/dev-server.js", "build": "node build/build.js" } 
config目录
我们webpack的配置项分别在两个目录里面，build和config，我们先看config，config里面的index.js导出了两个配置对象，build和dev。
var path = require('path')module.exports = { build: { env: require('./prod.env'), index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: '/', productionSourceMap: true, productionGzip: false, productionGzipExtensions: ['js', 'css'] }, dev: { env: require('./dev.env'), port: 8080, assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: {}, cssSourceMap: false }} dev.env.js导出了一个开发时的环境变量
NODE_ENV: '"development"'
prod.en.js导出了一个生产时的环境变量
NODE_ENV: '"production"'
config都是一些webpack配置时需要用到的变量。
build目录
build目录就是webpack的具体配置了，build.js和dev-server是入口配置。
1.check-versions.js是检测检查node和npm是否符合package.json里面的engines，如果不符合，会输出错误信息
2.dev-client.js是刷新当前页面
3.utils.js是工具包，导出了 assetsPath cssLoaders styleLoaders 三个方法，assetsPath是根据开发环境的全局变量获取目录路径，cssLoaders 返回一组cssloader
4.dev-server.js
引入了check-versions.js,并且自动执行，检测node和npm版本号。
引入了webpack.dev.conf，在webpack.dev.conf中又引入了webpack.base.conf.js,使用webpack-merge合并了这两个文件的配置项并且导出。
使用opn，监听配置项里面的端口号，新页面打开
5.build.js
引入了check-versions.js,并且自动执行，检测node和npm版本号。
将环境变量变成js env.NODE_ENV = 'production'
会引入webpack.prod.conf.js并且自动执行