build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: 'https://www.jb51.net/', /** * Source Maps */ productionSourceMap: true, // https://webpack.js.org/configuration/devtool/#production devtool: '#source-map', // 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 }
其中包括模版文件的修改，打包完目录之后的一些路径设置，gzip压缩等。明白了这些字段的意思之后，就可以在之后的开发中，主动根据项目需求，改动目录内容。
聊完config下的index.js文件，回到utils.js文件中，我们可以来看几个其中的方法，来分析它们分别起到了什么作用。
1、assetsPath方法
接受一个_path参数
返回static目录位置拼接的路径。
它根据nodejs的proccess.env.NODE_ENV变量，来判断当前运行的环境。返回不同环境下面的不同static目录位置拼接给定的_path参数。
2、cssLoaders方法
接受一个options参数，参数还有的属性：sourceMap、usePostCSS。
同时，这里用到了我们之前提到的extract-text-webpack-plugin插件，来分离出js中的css代码，然后分别进行打包。同时，它返回一个对象，其中包含了css预编译器(less、sass、stylus)loader生成方法等。如果你的文档明确只需要一门css语言，那么可以稍微清楚一些语言，同时可以减少npm包的大小(毕竟这是一个令人烦躁的东西)。
3、styleLoaders方法
接受的options对象和上面的方法一致。该方法只是根据cssLoaders中的方法配置，生成不同loaders。然后将其返回。
4、createNotifierCallback方法
此处调用了一个模块，可以在GitHub上找到，它是一个原生的操作系统上发送通知的nodeJS模块。用于返回脚手架错误的函数
一共这么四个函数方法，在utils中被定义到。
回看到webpack.base.conf.js文件中，我们可以直接跳过config目录下的index.js文件，之前已经分析过了。直接来看一下vue-loader.conf.js下的内容。
vue-loader.conf.js
这个文件中的代码非常的少，我们可以直接贴上代码，然后来分析，其中的作用。代码如下：
'use strict' const utils = require('./utils') const config = require('../config') const isProduction = process.env.NODE_ENV === 'production' const sourceMapEnabled = isProduction ? config.build.productionSourceMap : config.dev.cssSourceMap module.exports = { loaders: utils.cssLoaders({ sourceMap: sourceMapEnabled, extract: isProduction }), cssSourceMap: sourceMapEnabled, cacheBusting: config.dev.cacheBusting, transformToRequire: { video: ['src', 'poster'], source: 'src', img: 'src', image: 'xlink:href' } }
其中，主要就是根据NODE_ENV这个变量，然后分析是否是生产环境，然后将根据不同的环境来加载，不同的环境，来判断是否开启了sourceMap的功能。方便之后在cssLoaders中加上sourceMap功能。然后判断是否设置了cacheBusting属性，它指的是缓存破坏，特别是进行sourceMap debug时，设置成false是非常有帮助的。最后就是一个转化请求的内容，video、source、img、image等的属性进行配置。
具体的还是需要去了解vue-loader这个webpack的loader加载器。
分析了这么多，最终回到webpack.base.conf.js文件中
webpack.base.conf.js
其实的两个方法，其中一个是来合并path路径的，另一个是加载Eslint的rules的。
我们直接看后面那个函数，createLintingRule方法：
其中，加载了一个formatter，这个可以在终端中显示eslint的规则错误，方便开发者直接找到相应的位置，然后修改代码。
之后的一个对象，就是webpack的基础配置信息。我们可以逐一字段进行分析：
context => 运行环境的上下文，就是实际的目录
entry => 入口文件：src下的main.js文件
output => 输出内容，这内部的配置会根据不同的运行环境来进行变化