vue-cli#2.0 webpack 配置分析

前言

作为 Vue 的使用者我们对于 vue-cli 都很熟悉，但是对它的 webpack 配置我们可能关注甚少，今天我们为大家带来 vue-cli#2.0 的 webpack 配置分析

vue-cli 的简介、安装我们不在这里赘述，对它还不熟悉的同学可以直接访问 vue-cli 查看

目录结构

本篇文章的主要关注点在

build – 编译任务的代码

config – webpack 的配置文件

package.json – 项目的基本信息

入口

从 package.json 中我们可以看到

当我们执行 npm run dev / npm run build 时运行的是 node build/dev-server.js 或 node build/build.js

dev-server.js

让我们先从 build/dev-server.js 入手

webpack.dev.conf.js

刚刚我们在 dev-server.js 中用到了 webpack.dev.conf.js 和 index.js，我们先来看一下 webpack.dev.conf.js

webpack.base.conf.js

我们看到在 webpack.dev.conf.js 中又引入了 webpack.base.conf.js， 它看起来很重要的样子，所以我们只能在下一章来看看 config/index.js 了 （摊手）

config/index.js

终于分析完了 webpack.base.conf.js，来让我们看一下 config/index.js

index.js 中有 dev 和 production 两种环境的配置

至此，我们的 npm run dev 命令就讲解完毕，下面让我们来看一看执行 npm run build 命令时发生了什么 ～

build.js

webpack.prod.conf.js

总结

至此 ～ 我们的 vue-cli#2.0 webpack 配置分析文件就讲解完毕 ～

对于一些插件的详细 options 我们没有进行讲解，感兴趣的同学可以去 npm 商店搜索对应插件查看 options ~

原文链接：https://github.com/DDFE/DDFE-blog/issues/10