webpack配置文件解析

webpack配置文件解析

dev-server.js文件

Node.js代理服务器的中间件(可以代理和转发一些我们需要的API)
var proxyMiddleware = require('http-proxy-middleware')  
var port = process.env.PORT || config.dev.port//定义了端口号,不仅可以从环境变量中取,也可以从 config文件下得 index.js 文件下获取 8080
var 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进行编译,但是前者会先处理