Vue-cli3.0以后基于 webpack 4 打造，并学习了 rollup 的零配置思路。因此在设计上更加抽象和简洁，优化和完善了很多配置，所以项目初始化后，Vue帮我们完成了绝大部分情形下的 webpack 配置。就没有了Vue2.0的 build 目录和 webpack.base.config.js、webpack.dev.config.js 、webpack.prod.config.js 、vue-loader.conf.js等配置文件。

vue.config.js

vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。当我们需要修改配置信息时，可以在项目根目录下手动新建一个 vue.config.js，然后在 vue.config.js中配置我们的参数即可。

如何webpack配置

第一步：利用命令： vue inspect > output.js查看webpack的配置情况，执行后会在根目录下生成一份最终生效的webpack配置文件output.js，在output.js，这样可以省去看 cli-service 源码。

?第二步：在 output.js中搜索你要拍配置的相关配置信息，比如我要查看svg的配置信息，这里我们可以看到后缀为svg的文件会通过file-loader插件来渲染。

?第三步：在vue.config.js 中修改svg的配置信息，这里我希望file-loader不处理指定目录的后缀为svg的icon图标，并希望通过svg-sprite-loader来处理类型为svg的icon图标。

?第四步：重新利用命令： vue inspect > output.js导出下 output.js文件，查看下最终生效的webpack的配置情况。

这里我们可以看到file-loader渲染不包括@/assets/icons目录文件，而svg-sprite-loader只处理@/assets/icons目录文件。

?常用webpack配置

Webpack核心概念：
入口(entry)，这是webpack的起点，是页面入口文件配置。
输出(output)，对应输出项配置。
加载器(loader)，导入任何类型的模块。
插件(plugin)，可以用来处理各种各样的任务。
模式(mode)，设置 mode 参数，可以启用 webpack 内置在相应环境下的优化。
常用的参数属性：
require属性，用来引入插件。
path属性:输出的绝对路径
test属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件（配置匹配正则规则）。
use属性，表示进行转换时，应该使用哪个 loader。
include属性：只处理指定的目录文件。
exclude属性：指定某目录文件不被处理。
options属性：当前loader需要的特殊配置（可选）。
resolve属性：设置模块如何被解析。

const path = require('path') // 引入插件
function resolve (dir) {
 return path.join(__dirname, dir)
}

module.exports = {
 lintOnSave: false, // 取消eslint 校验代码
 devServer: {
 port: 1527, // 配置端口号
 open: true, // 自动启动浏览器
 proxy: {
 '/': { // 将域名印射到"/"
 target: 'http://127.0.0.1:8080', // 后台跨域访问接口
 changeOrigin: true // 允许跨域
 }
 }
 },
 chainWebpack: config => {
 config.module
 .rule('svg') // 默认svg图渲染配置
 .exclude.add(resolve('src/assets/icons')) // 排除渲染目录
 .end()
 config.module // 配置模板信息
 .rule('icons')
 .test(/\.(svg)(\?.*)?$/) // svg图渲染配置
 .include.add(resolve('src/assets/icons')) // 添加渲染目录
 .end()
 .use('svg-sprite-loader') // 使用渲染插件
 .loader('svg-sprite-loader')
 .options({
 symbolId: 'icon-[name]'
 })
 config.resolve.alias // 别名配置
 .set('@', resolve('src')) // 设置@指向src目录
 .set('assets', resolve('src/assets'))
 .set('components', resolve('src/components'))
 .set('static', resolve('src/static'))
 .set('styles', resolve('src/styles'))
 }
}

后续如有新增会在评论区补上，更多Vue实战技巧可以参考专栏：Vue实战系列

四时宝库

程序员的知识宝库

Vue实战058:cli3如何配置webpack及常用配置集

vue.config.js

如何webpack配置

?常用webpack配置