虾米带你轻松搞定Vuejs 系列

（三）构建基础进阶-Webpack使用cli 3.x

webpack作为目前最火爆的项目打包工具，被广泛的适用于项目的构建和开发过程中，其实说他是打包工具，有点狭隘了，我个人认为扎实一个集前端，自动化、模块化、组件化域一体的系统，可以根据自己的配置和安装，最终实现你需要的功能进行打包输出。

在Vue中，webpack有着举足轻重的作用，比如说打包压缩、异步加载、模块化管理等等，如果你还对webpack不了解，可以到官网去了解并学习。

1、Webpack的使用

1、1与vue-cli 2.x的差异
如果你使用过2.x的版本，那么你应该了解其构建出的目录可以清晰的看到webpack的配置文件，但是我们呢在使用3.x的时候发现一点配置都没有看到，猜想一下是不是抛弃了webpack？其实并不是这样的。你可以打开它的源文件发现内部可以看到你熟悉的配置，如图：

那么我们这里比较一下2.x和3.x的差异，在2.x中可以清晰的看到webpack.config.js配置文件（由于本地全局安装了3.x的脚手架，直接从官网以2.9.6版本为例子查看）
2.x的目录结构：

在正常项目开发过程中可能需要区分基本配置webpack.base.config.js，开发环境配置webpack.dev.config.js、生产环境的配置webpack.prod.config.js.

在3.x中脚手架还提供了配置重载机制，你可以通过vue.config.js来实现自己的配置，我们先看一下官网的介绍：

说vue.config.js是一个可选的配置，自动被@vue/cli-service自动加载，等等，这里不做翻译了。
在这里我们可以看到vue.config.js可以配置的主要参数：

1.2、vue.config.js 的配置
上面我们大概说了一下新老板的配置对比，并且列出了vue.config.js的主要配置项，下面我们就介绍一下这些配置：
1.2.1 baseUrl
用于你的应用部署中的地址，相等于webpack配置中的output.publicPath;但是vue-cli中用于它还有更高层次的目的。所以我们尽量使用baseUrl而不是去修改output.publicPath。
我们在配置中做了指定配置值是vue的时候 原来访问地址http://192.168.2.25:8080/#/就会变成http://192.168.2.25:8080/vue/#/.
但是使用这个属性的时候也有一些限制，如下：
相对 baseUrl 的限制
相对路径的 baseUrl 有一些使用上的限制。在以下情况下，应当避免使用相对 baseUrl:
当使用基于 HTML5 history.pushState 的路由时；
当使用 pages 选项构建多页面应用时
1.2.2 outputDir
如果你想将构建好的文件打包输出到 output 文件夹下（默认是 dist 文件夹），你可以配置：

1.2.3 productionSourceMap
该配置用于设置是否为生产环境构建生成source map,个人习惯在生产环境下为了快速定位问题，建议打开source map。

1.2.4 chainWebpack
chainWebpack 配置项循序我们采用更细粒度的配置，根据官网描述他集成webpack-chain这个插件，你可以这样使用。

上边的代码是什么意思？ 通过上边的代码可以修改webpack中module项的配置rules规则为图片下的url-loader值，将它的最大值现在在5M，我们可以对配置做出这样的修改

其他插件就不介绍了，我发现一一列出来的也没啥意义，官网上都有介绍。这里直接附上官网的地址：https://cli.vuejs.org/zh/config/#全局-cli-配置

2、默认插件的简介

通过上边简单对vue.config.js的介绍，我们接下来看一下vue-cli 3.x给我们自动封装了那些默认的插件呢。话不多少直接上图（这里只介绍webpack-simple；至于要研究webpack模式可以自行百度）：

总结

本文主要阐述了 vue-cli 3.x 下基于 vue.config.js 配置 webpack 的主要方法，同时也介绍了其默认的 webpack 插件与主要功能，我发现了解 webpack 的知识后能够更加轻松的开展后续内容的学习，为接下来项目的构建和开发奠定基础.