逐行阅读vue-cli webpack配置(二)

原创 xiaoyu7 教程 开发工具 209阅读 2017-11-24 14:13:07 举报

ok,通过第一篇文章我们了解了开发环境下配置,那生产环境下的配置是什么样的呢?

webpack2-1

通过build命令我们知道 node 执行了build目录下的build.js
进入build文件

webpack2-2

首先判断环境版本,我们进去check-version文件:
通过一些模块和插件的使用,对node还有npm版本做了判断和检查,具体循环package.json的配置:

webpack2-3

webpack2-4

webpack2-5

接着通过进行目录处理然后执行webpack()命令,进行打包,webopack通过引入的prod配置实现生产环境的配置,
然后对错误进行处理,并打印统计信息到控制台。
我们对生产环境的配置再做进一步观察:

五、webpack.prod.conf.js配置

webpack2-6

可以看到,生产环境中
引入使用的模块和插件 + 对base配置和prod配置做合并+开启Gzip判断+开启包分析判断+导出
我们展开来看,首先是扩展的prod配置,我做了详细的注释:

webpack2-7

webpack2-8

webpack2-9

webpack2-10

接着是Gzip和包分析判断

webpack2-11

大部分的配置项都是根据config目录下的index.js里的build配置项,具体可以跳转过去查看。
至此,整个vue-cli的配置环境都概览完毕啦~详细的注释和文件见附件~

逐行阅读vue-cli webpack配置(二)

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复