vue svg sprite loader_Vue实战035：webpack配置及svg配置优化

什么是 webpack

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)，它能把各种资源作为模块来使用和处理，把有依赖关系的各种文件打包成一系列的静态资源。如图中所示，webpack支持打包脚本、样式、图片、表等资源。

webpack配置在Vue-cli3.0与 2.0 的区别

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

如何修改webpack配置

那么我们想自定义webpack时怎么办呢 ，这时可以在项目根目录下手动新建一个 vue.config.js，vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。所以我们只要在 vue.config.js配置我们的参数即可。

webpack基本属性

如果不了解webpack的可以进webpack官网了解下，关于vue.config.js可以参考Vue官方的配置指南，在配置之前我们需要先来了解下webpack一些核心概念：

入口(entry)，这是webpack的起点，是 页面入口文件配置 。

输出(output)，对应输出项配置 。

加载器(loader)，导入任何类型的模块。

插件(plugin)，可以用来处理各种各样的任务。

模式(mode)，设置 mode 参数，可以启用 webpack 内置在相应环境下的优化。

再来了解些常用的参数属性：

require属性，用来引入插件。

path属性:输出的绝对路径

test属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件(配置匹配正则规则)。

use属性，表示进行转换时，应该使用哪个 loader。

include属性：只处理指定的目录文件。

exclude属性：指定某目录文件不被处理。

options属性：当前loader需要的特殊配置(可选)。

resolve属性：设置模块如何被解析。

如何配置webpack

了解了以上的基本参数属性我们就可以看懂webpack的配置信息了，这里还是拿之前Vue实战034：使用SVG图标详解中的配置svg处理方案解析，因为之前配置的有点不完善，所以今天顺带一起优化下了，在配置之前我们先来看来最初的配置情况，利用命令： vue inspect > output.js可以在根目录下生成一份webpack配置文件output.js，在output.js我们搜索svg配置可以看到svg默认情况下是采用file-loader来处理的。

前面说的配置不完善是因为我忽略了其他地方是否也会使用到svg图片，我将svg配置给直接清除了，统一用svg-sprite-loader来处理了，file-loader生成的文件的文件名就是文件内容的 MD5 哈希值并会保留所引用资源的原始扩展名(确保了图片的唯一性)，这种处理方式比较适合图片，但显然不适合icon图标的使用。

这里我希望svg图标使用svg-sprite-loader插件来处理，而其他适用到svg图片时还是使用file-loader来处理，所以这里我将配置进行了优化，先在原有的svg处理方案中添加一个.exclude.add(resolve('src/assets/icons'))选项，将我们防止svg图标的目录过滤掉，这样处理到SVG图标的时候就不会走这个方案。然后我再新增了一个针对src/assets/icons目录中的svg图标处理方案，遇到图标时就使用该方案。

const path = require('path')function resolve (dir) { return path.join(__dirname, dir)} module.exports = { chainWebpack: config => { config.module .rule('svg') .exclude.add(resolve('src/assets/icons')) .end() config.module .rule('icons') .test(/.(svg)(?.*)?$/) .include.add(resolve('src/assets/icons')) .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }) }}

svg图标下载

Iconfont阿里巴巴图库就满足我们平时用到的图标了，同时也支持下载svg格式的图标，搜索你想要的图标添加入库，然后点击图标中的下载按钮就弹出如下选择，我们下svg图即可。

注意：测试时一定要重启服务，刷新服务是看不到效果的。

欢迎关注本人的公众号：编程手札，文章也会在公众号更新