webpack配置文件解析

dev-server.js文件

Node.js代理服务器的中间件(可以代理和转发一些我们需要的API)var proxyMiddleware = require('http-proxy-middleware')  var port = process.env.PORT || config.dev.port//定义了端口号,不仅可以从环境变量中取,也可以从 config文件下得 index.js 文件下获取 8080var proxyTable = config.dev.proxyTable//这是从 config文件里的index 内的 dev: proxyTable 中获取需要代理的一些接口,根据业务需求调配,需要的话则通过 proxyTable 进行转发var app = express()//启动 express获取app对象var compiler = webpack(webpackConfig)//调用webpack方法编译,把 webpackConfig 传入 是为了给下面的中间件用得devMiddleware//express专门为webpack开发的一个中间件,我们可以请求到 app.js 但是我们的文件目录中没有这个文件--(这个中间件把编译好的文件放在内存中,我们访问的就是这个内存)hotMiddleware//与热加载相配合使用的一个插件staticPath//配置静态资源的访问目录

webpack.dev.conf.js文件

var merge = require('webpack-merge')//用于合并配置文件var utils = require('./utils')//代表一些工具方法var baseWebpackConfig = require('./webpack.base.conf')//开发和运行的配置文件所共享的,var HtmlWebpackPlugin = require('html-webpack-plugin')//提供操作HTML文件的一个插件add hot-reload related code to entry chunks//热加载功能模块,代码改动,浏览器不刷新实现代码功能module.exports    module:        loader:utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })//处理独立的css或者预处理的样式文件    devtool: '#eval-source-map',//开发时方便我们做源码调试    plugins:定义的一些插件        new webpack.DefinePlugin({'process.env':config.dev.env}),//把源码中的 process.env 字符串替换为 config.dev.env        new webpack.optimize.OccurrenceOrderPlugin(),//webpack打包后的一些优化相关的插件,给经常使用的模块一个最小的id        new webpack.HotModuleReplacementPlugin(),//热加载的插件        new webpack.NoErrorsPlugin(),//编译出现错误代码后,会跳过那部分代码,使编译后运行的包不会出现错误        new HtmlWebpackPlugin            inject: true//打包过程中输出的js或者css文件路径会自动添加到这个 HTML 文件里

webpack.base.conf.js文件

var projectRoot = path.resolve(__dirname, '../')//定义了当前项目的根目录module.exports //webpack的一些基本配置    output        path: config.build.assetsRoot,//设置文件的路径,对应config.js文件的build内的assetsRoot        publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,//表示请求的静态资源的绝对路径,对应config.js文件的build内的assetsPublicPath    resolve的配置是针对 require 或者 import 请求的文件的相关配置        extensions:在请求的模块中自动补全文件的后缀        fallback:在前端require模块中找不到时,我们可以到node_modules文件中找        alias:提供一些别名,在require中通过别名来缩短字符串的长度    resolveLoader:        fallback:和上一个功能差不多    module        preloaders和loaders的作用是一致的,都是对某种类型文件运用某个loader进行编译,但是前者会先处理