vue-cli配置文件――config篇

最近一直在研究webpack，突然想看看vue-cli中的webpack是如何配置，查阅了很多相关的文章，所以也想出几篇关于vue-cli配置的东西。正所谓“工欲善其事必先利其器”嘛！这一篇主要是分析vue中关于 config文件夹中的相关代码 ；

首先我们先看一下config的文件结构：

 |-config |---dev.env.js |---index.js |---prod.env.js

打开我们的vue项目文件夹我们可以清楚的看到文件夹下的三个文件， “dev.env.js” ， “index.js” ， “prod.env.js” ，我们先打开prod.env.js的文件，看里面的内容：

 'use strict' module.exports = { NODE_ENV: '"production"' }

prod.env.js的内容非常简单，仅仅是导出了一个对象，里面写明了执行环境是“production（生产环境）”；我们接下来看与之对应的“dev.env.js”文件：

 'use strict' //引入webpack-merge模块 const merge = require('webpack-merge') //引入刚才打开的prod.env.js const prodEnv = require('./prod.env') module.exports = merge(prodEnv, { NODE_ENV: '"development"' })

在“dev.env.js”中，先引入了webpack-merge这个模块。这个模块的作用是来合并两个配置文件对象并生成一个新的配置文件，有点儿类似于es6的object.assign();

vue-cli中将一些通用的配置抽出来放在一个文件内，在对不同的环境配置不同的代码，最后使用web

本文来源gao!daima.com搞$代!码#网#

pack-merge来进行合并，减少重复代码，正如文档中所说，“ webpack遵循不重复原则(Don’t repeat yourself – DRY)，不会再不同的环境中配置相同的代码 ”

当然，关于webpack-merge的内容还远不止这些，想了解更多前端的相关知识），

assetsRoot打包后的文件根路径，至于assetsSubDirectory和assetsPublicPath跟dev中的一样，

productionSourceMap是否开启source-map，

devtool同dev，

productionGzip是否压缩，

productionGzipExtensions gzip模式下需要压缩的文件的扩展名，设置后会对相应扩展名的文件进行压缩

bundleAnalyzerReport 是否开启打包后的分析报告

截止到这儿，config文件夹下的内容基本上就过完了，正如名字告诉我们的，这三个文件仅仅是写死的配置文件，截止目前还没遇到太多

总结