详解vue-cli 2.0配置文件(小结)(3)

// node自带路径工具.
var path = require('path')
// 分为两种环境，dev和production
module.exports = {
 build: {
 env: require('./prod.env'),// 使用config/prod.env.js中定义的编译环境
 index: path.resolve(__dirname, '../dist/index.html'),// 编译输入的index.html文件。node.js中，在任何模块文件内部，可以使用__filename变量获取当前模块文件的带有完整绝对路径的文件名,
 assetsRoot: path.resolve(__dirname, '../dist'),// 编译输出的静态资源路径
 assetsSubDirectory: 'static',// 编译输出的二级目录
 assetsPublicPath: './', // 编译发布的根目录，可配置为资源服务器或者cdn域名
 productionSourceMap: false,//是否开启cssSourceMap
 productionGzip: false,// 是否开启gzip
 productionGzipExtensions: ['js', 'css'],// 需要用gzip压缩的文件扩展名
 bundleAnalyzerReport: process.env.npm_config_report
 },
 dev: {
 env: require('./dev.env'),
 port: 8989,// 起服务的端口
 autoOpenBrowser: true,
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 proxyTable: {},// 需要代理的接口，可以跨域
 cssSourceMap: false
 }
}

var utils = require('./utils')// 工具类
var webpack = require('webpack')
var config = require('../config')
var merge = require('webpack-merge')// 使用webpack配置合并插件
var baseWebpackConfig = require('./webpack.base.conf')
var HtmlWebpackPlugin = require('html-webpack-plugin')// 这个插件自动生成HTML，并注入到.html文件中
var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')

// 将hot-reload相对路径添加到webpack.base.conf的对应的entry前面
Object.keys(baseWebpackConfig.entry).forEach(function (name) {
 baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
})

// webpack.dev.conf.js与webpack.base.conf.js中的配置合并
module.exports = merge(baseWebpackConfig, {
 module: {
 rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
 },
 // webpack-devtool有7种模式，cheap-module-eval-source-map模式是比较快的开发模式
　
 devtool: '#cheap-module-eval-source-map',
 plugins: [
　　// 你可以理解为，通过配置了DefinePlugin，那么这里面的标识就相当于全局变量，你的业务代码可以直接使用配置的标识。
 new webpack.DefinePlugin({
  'process.env': config.dev.env
 }),
 // hotModule插件让页面变动时，只重绘对应的模块，不会重绘整个HTML文件
 new webpack.HotModuleReplacementPlugin(),
　　// 在编译出现错误时，使用 NoEmitOnErrorsPlugin 来跳过输出阶段。这样可以确保输出资源不会包含错误
 new webpack.NoEmitOnErrorsPlugin(),
 // 将生成的HTML代码注入index.html文件
 new HtmlWebpackPlugin({
  filename: 'index.html',
  template: 'index.html',
  inject: true
 }),
　　// friendly-errors-webpack-plugin用于更友好地输出webpack的警告、错误等信息
 new FriendlyErrorsPlugin()
 ]
})