resolve => 其中的extensions字段，指定检测的文件后缀，同时alias是用于指定别名的。在引用文件路径中，如果有别名的符号，会被替换成指定的路径。
module => 配置了一些eslint、vue、js、图片资源、字体图标、文件等加载的loader。详细的可以去看webpack的官方网站。
node => 此处部分有注释，主要是阻止一些webpack的默认注入行为，因为在vue中，已经具备了这些功能。
看完这些，你或许对webapck.base.conf.js中的内容有了一些初步的了解。其实，看懂它还需要你了解webpack这个非常有用的打包工具。
之后，我们在来回看webpack.dev.conf.js这个文件
webpack.dev.conf.js
这个文件中，引用了webapck-merge这npm包，它可以将两个配置对象，进行合并。代码如下：
const merge = require('webpack-merge'); const devWebpackConfig = merge(baseWebpackConfig, { ... }
这样就合并了base中的webpack配置项。之后，我们可以来看一下dev环境中的新增了那些配置项，它们分别起到了什么作用？
首先，在module的rules中增加了cssSourceMap的功能
然后就是devtools，通过注释的英文翻译，可以知道cheap-module-eval-source-map使得开发更快。
之后，就是devSever的一些配置项了。其中包块客户端报错级别、端口、host等等
还有新增的plugins，我们可以来看一下实际新增的plugins(具体可以看webpack文档)：
定义process.env
HotModuleReplacementPlugin: 模块热替换插件
NameModulesPlugin: 显示模块加载相对路径插件
NoEmitOnErrorsPlugin: 在编译出现错误时，使用 NoEmitOnErrorsPlugin 来跳过输出阶段。这样可以确保输出资源不会包含错误
HtmlWebpackPlugin: 使用插件生成一个指定的模版。
后，还有一个函数，确保启动程序时，如果端口被占用时，会通过portfinder来发布新的端口，然后输出运行的host字符串。
webpack.prod.conf.js
这是打包到生产环境中，会被用到的文件。我们可以看到，它相对于之前的webapck.dev.conf.js文件少了一些插件，多了更多的插件。我们也可以和之前一样，通过它新增的一些东西，来知道它到底干了什么！(此处的新增是相对于webpack.dev.conf.js没有的内容)
新增了output的配置，我们可以看到它在output中新增了一些属性，将js打包成不同的块chunk，然后使用hash尾缀进行命名
添加了一些插件：
UglifJsPlugin: 这个是用来丑化js代码的
ExtractTextplugin: 这里新增了一些属性，在打包的css文件也增加了块和hash尾缀
OptimizeCssplugin: 这里是来优化css文件的，主要就是压缩css代码
HashedModuleIdsPlugin: 保证module的id值稳定
optimize: 这里是webpack一系列优化的措施，具体可以逐一查看官方文档
CopyWebPlugins: 自定义assets文件目录
如果没有进行gzip压缩，调用CompressionWebpackPlugin插件进行压缩
这样，我们的webpack配置文件内容基本上就全部看完了。或许，会有点蒙，还是看官方文档来的实在。
最后，还需要分析一个build.js文件。
build.js
这个文件是在打包的时候，会被用到的。
首先，文件的开头请求了check-version.js中的函数，然后确定了一下node和npm的版本。相对于较低版本的node和npm，在打包过程中，会产生警告。之后，设置环境参数，设置成生产环境，之后就是一系列打包的流程。
总结
本篇文章，主要总结了一下vue-cli生成的文件中，其中的一些配置参数和文件大致的作用。有不到位的地方，希望大家可以指正。同时希望我们共同进步，共勉。
您可能感兴趣的文章: