Vue CLI 4.0 webpack属性讲解以及创建vue.config.js

为什么要了解Vue CLI 4.0 webpack配置？

使用Vue.js 必然需要使用Vue CLI；使用Vue CLI，不可避免的会涉及到webpack的使用。而webpack最关键的地方就是配置了。Vue CLI 是基于webpack构建起来的Vue手脚架。俗话说得好，磨刀不误砍柴工。想要提高在Vue上的编码速度，必然需要一个好的Vue CLI；想要拥有一个好的Vue CLI，肯定离不开好的webpack配置。所以说，了解Vue CLi的配置方法，对Vue 开发人员来说是很重要的。

可能有人说，Vue CLI 默认配置就很好用呀！并不需要去配置自己的webpack。

诚然，Vue CLI官方的配置已经很好用的。但是Vue CLI 默认配置是面向大众的。说白了就是一款满足大众开发需求的webpack方案。然而，总顶不住某些奇葩的需求。面对这些特殊的需求，可能默认配置就不适用了。例如，项目部署上线的路径问题、跨域调试问题、项目打包优化问题等等。

Vue CLI webpack 的历史

Vue CLI 有一个重要的节点，那就是Vue CLI 3.0。在Vue CLI 3.0 之前，webpack 的配置文件叫做webpack.config.js，用Vue CLI 创建项目时会自动生成。这时的Vue CLI 的webpack配置方法跟webpack官方配置方法一样。但是到了Vue CLI 3.0之后（包括Vue CLI 3.0），配置文件就变成了vue.config.js。Vue CLI 不再默认生成webpack的配置文件了。想要手动配置webpack，就需要用户在项目根目录手动去添加vue.config.js。而且，Vue 还对webpack配置做了自己的定制，增加了一些定制属性，配置的方法跟webpack官方提供的方法有了一些不同。

为了帮助大家能够快速了解Vue CLI webpack，以及巩固我自己关于Vue CLI的知识点。我将以一个系列来讲解Vue CLI webpack。期待与大家共进，相互学习。

本系列讲的是什么？

本系列是一个Vue CLI 4.0 webpack的入门专栏，主要介绍的是Vue CLI 4.0 webapck基础内容，将会结合Vue CLI 4.0 的官方文档，对Vue CLI 4.0 的webpack的一些常用配置属性进行讲解，辅以配置属性使用代码案例。此外，还将提供一个完整的基础配置范例。

开始：创建vue.config.js

想要在Vue CLI 4.0 配置自己的webpack。第一步，要做的就是创建vue.config.js。

关于vue.conmfig.js，官方说明如下：

vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。

• 第一点：vue.config.js是可选配置文件；
• 第二点：vue.config.js必须存在与项目根目录，不然无法生效。这里要提及的一点，项目的根目录是更具package,json文件来定义的。
• 第三点：Vue.config.js会被自动加载（前提是位置正确）。所以我们只需要添加好vue.config.js，并做好配置就行了。

如下图，这是添加好vue.config.js的项目了。可以看到vue.config.js与package.json在同一层目录。

小知识

实际上，VueCLI 3.0及以上构建的项目是有webpack.config.js的，只是被Vue隐藏起来了。里面是VueCLI的默认webpack配置。而vue.config.js是vue 对webpack.config.js的扩展文件。最终编译时，vue.config.js会被合并到webpack.config.js中。
如果我们想查看最终编译的webpack配置，可进行一下操作：

vue inspect

在控制台的Vue项目根目录下运行上面代码，webpack配置将在控制台打印出来。

如果，想要webpack配置存储到一个文件中，可以这样：

vue inspect > output.js

这样webpack配置将存在到output.js中。（output.js存储的文件路径为项目根目录）

更多相关知识，可参考VueCLI官方文档：审查项目的-webpack-配置

系列目录

• 第一篇：Vue CLI 4.0 webpack属性讲解以及创建vue.config.js
• 第二篇：Vue CLI4.0 webpack配置属性——publicPath
• 第三篇：Vue CLI4.0 webpack配置属性——outputDir、assetsDir、indexPath
• 第四篇：Vue CLI4.0 webpack配置属性——filenameHashing
• 第五篇：Vue CLI4.0 webpack配置属性——lintOnSave、configureWebpack、chainWebpack、parallel
• 第六篇：Vue CLI4.0 webpack配置属性——crossorigin
• 第七篇：Vue CLI4.0 webpack配置属性——productionSourceMap
• 第八篇：Vue CLI4.0 webpack配置属性——css.sourceMap
• 第九篇：Vue CLI4.0 webpack配置属性——css.extract
• 第十篇：Vue CLI4.0 webpack配置属性——css.requireModuleExtension、css.loaderOptions
• 范例篇：Vue CLI 4.0 关于 webpack 基本配置范例