4.核心概念-Loader—下-灵析社区

懒人学前端

九、Svg-URL-Loader

svg-url-loader

svg-url-loader 可以将 svg 文件加载为 utf-8 编码的 data-uri 字符串。url-loader 也可以加载 svg 文件，和 svg-url-loader 的区别是 url-loader 将 svg 文件加载为 base64 编码的字符串。

utf-8 编码相对于 base64 编码有一些优势。

  • 编译结果字符串更短（对于 2K 大小的图标，可以缩短约 2 倍）；
  • 使用 gzip 压缩时，生成的字符串将被更好地压缩；
  • 浏览器解析 utf-8 编码的字符串比 base64 编码的字符串更快；

使用

index.html

<!DOCTYPE html>
<html lang="en">
    <header>
        <title>svg-url-loader</title>
    </header>
    <body>
        <img id="svg-loader" />
    </body>
</html>

index.js

import svgContent from './img/headIcon.svg';
window.document.getElementById('svg-loader').src = svgContent;

安装 svg-url-loader

npm install svg-url-loader --save-dev

安装成功后，将 svg-url-loader 配置到 webpack.config.js 中。

module.exports = {
  ...
   module: {
    rules: [
      {
        test: /\.svg/,
        use: {
          loader: "svg-url-loader",
        },
      }
    ]
  }
};

执行打包命令后，在浏览器打开 dist/index.html 文件，我们可以看到 svg 图片被展示在页面是上，打开 dist/main-[hash].js 文件可以看到 svg 图片被编译成了 utf-8 编码的字符串。

配置项

svg-url-loader 包含下面参数。

  • limit
  • stripdeclarations
  • iesafe
  • encoding

limit

默认值：无

值类型：Number

作用：当设置 limit，如果源文件的内容大于这个限制，svg-url-loader 将不编码源文件。如果文件大于 limit 设置的限制，将使用 file-loader 加载文件，svg-url-loader 中设置的参数会传递给 file-loader。

webpack.config.js

module.exports = {
  ...
  {
    test: /\.svg/,
    use: {
      loader: "svg-url-loader",
      options: {
        limit: 1024 // 文件大小 1M
      }
    }
  }
};

stripdeclarations

默认值：true

值类型：Boolean

作用：它将在下一个主要版本中被删除，删除所有 XML 声明。例如：svg 图片开头的 <?xml version="1.0" encoding="UTF-8"?>。

webpack.config.js

module.exports = {
  ...
  {
    test: /\.svg/,
    use: {
      loader: "svg-url-loader",
      options: {
        stripdeclarations: false
      }
    }
  }
};

iesafe

默认值：无

值类型：Boolean

作用：当 iesafe 选项设置为 true，svg-url-loader 在编译文件时，如果文件包含一个样式元素并且编码大小超过 4kB，则无论指定的限制如何，都使用 file-loader 编译。因为 ie 浏览器包括 ie11 已经停止解析 svg 数据中的样式元素和大小超过 4kb 的文件，会导致所有样式的形状都是黑色填充。

webpack.config.js

module.exports = {
  ...
   {
      loader: "svg-url-loader",
      options: {
        iesafe: true
      },
    }
};

encoding

默认值："none"

值类型："none" ｜ "base64"

作用：设置 svg-url-loader 构造数据 URI 时要使用的编码。

webpack.config.js

module.exports = {
  ...
  {
    loader: "svg-url-loader",
    options: {
      encoding: "base64"
    },
  }
};

总结

本节我们介绍了 svg-url-loader 的使用方法和一些配置参数。svg-url-loader 主要用来编译 svg 格式文件，默认采用 utf-8 编码。

十、Svg-Sprite-Loader

svg-sprite-loader

svg-sprite-loader 作用是合并多个单个的 svg 图片为一个 sprite 雪碧图，并把合成好的内容，插入到 html 内，其原理是利用 svg 的 symbol 元素，将每个 svg 图片 包括在 symbol 中，通过 use 元素使用该 symbol。svg 元素参考。

使用

index.html

在 index.html 中，通过使用 svg 的 use 元素渲染两张 svg 图片，分别对应 img 文件夹下的 headIcon.svg 和 home.svg。

<!DOCTYPE html>
<html>
  <header>
    <title>svg-sprite-loader</title>
  </header>
  <body>
    <svg>
      <use xlink:href="#headIcon"></use>
    </svg>    
    <svg>
      <use xlink:href="#home"></use>
    </svg>        
  </body>
</html>

index.js

导入 index.html 中 use 元素加载的两张 svg 图片。

import svgContent from './img/headIcon.svg';
import svgHome from './img/home.svg';

安装 svg-sprite-loader

npm install svg-sprite-loader --save-dev

安装成功后，将 svg-sprite-loader 配置到 webpack.config.js 中。

module.exports = {
  ...
   module: {
    rules: [
      {
        test: /\.svg/,
        use: {
          loader: "svg-sprite-loader"
        },
      }
    ]
  }
};

执行打包命令后，在浏览器打开 dist/index.html 文件，我们可以看到 svg 图片被展示在页面上，在控制台查看 elements 选项，可以看到两个 svg 图片被包裹在 两个 symbol 标签中，使用时通过 use 标签传入 symbol 元素 id 来显示不同的 svg 图片。

配置项

svg-sprite-loader 包含下面基础参数配置。

  • symbolId
  • symbolRegExp
  • esModule

symbolId

默认值：[name]

值类型：String | Function

作用：设置 svg 标签中 symbol 元素的 id 值。

html

<svg>
    <use xlink:href="#icon-headIcon"></use>
</svg>

webpack.config.js

module.exports = {
  ...
  {
    test: /\.svg/,
    use: {
      loader: "svg-sprite-loader",
      options: {
        // string
        symbolId: 'icon-[name]'
        // function
        symbolId: filePath => path.basename(filePath)
      }          
    }
  }
};

symbolRegExp

默认值：''

值类型：String

作用：传递给 symbolId 插值器以支持 loader-utils 名称插值器中的 [N] 模式。

esModule

默认值：true

值类型：Boolean

作用：是否使用 esModule 语法。如果使用 CommonJS 语法则参数设置为 false。

webpack.config.js

module.exports = {
  ...
   {
      loader: "svg-sprite-loader",
      options: {
        esModule: true
      },
    }
};

svg-sprite-loader 还支持运行时配置和提取配置，想了解的小伙伴儿可自行查阅文档。

总结

本节我们介绍了 svg-sprite-loader 的使用方法和一些配置参数。svg-sprite-loader 主要用来将从 css/scss/sass/less/styl/html 导入的图像生成外部 sprite 文件，通过使用 svg 的 use 元素展示 图像内容。达到统一管理的目的。

十一、VUE-Loader

vue-loader

Vue Loader 是一个 webpack 的 loader，它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件。

Vue Loader 还提供了很多酷炫的特性：

  • 允许为 Vue 组件的每个部分使用其它的 webpack loader，例如在 <style> 的部分使用 Sass 和在 <template> 的部分使用 Pug；
  • 允许在一个 .vue 文件中使用自定义块，并对其运用自定义的 loader 链；
  • 使用 webpack loader 将 <style> 和 <template> 中引用的资源当作模块依赖来处理；
  • 为每个组件模拟出 scoped CSS；
  • 在开发过程中使用热重载来保持状态；

使用

在下面的例子中，正常要使用 Vue.js 将组件渲染到页面上。但是这样会增加一些额外的代码，容易混淆，所以下面的例子只是完成打包不报错即认为 vue-loader 起到了作用。

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>vue-loader</title>
    </head>
    <body>
    </body>
</html>

index.vue

<template>
  <div class="demo">{{ msg }}</div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

<style>
.demo {
  color: blue;
}
</style>

安装 vue-loader

vue-loader 需要配合 vue-template-compiler 一起使用。

npm install vue-loader vue-template-compiler --save-dev

安装成功后，将 vue-loader 配置到 webpack.config.js 中。

module.exports = {
...
// webpack.config.js
const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
    ...
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
            },
            // 它会应用到普通的 `.css` 文件
            // 以及 `.vue` 文件中的 `<style>` 块
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    },
    plugins: [
         // 请确保引入这个插件！
         // 这个插件是必须的！它的职责是将你定义过的其它规则复制并应用到 .vue 文件里相应语言的块。例如，如果你有一条匹配 /\.js$/ 的规则，那么它会应用到 .vue 文件里的 <script> 块。
         new VueLoaderPlugin()
    ]
};

执行打包命令后，控制台显示编译成功。

配置项

vue-loader 参数配置。

  • transformAssetUrls
  • compiler
  • compilerOptions
  • transpileOptions
  • optimizeSSR
  • hotReload
  • productionMode
  • shadowMode
  • cacheDirectory / cacheIdentifier
  • prettify
  • exposeFilename

vue-loader 的配置项官网显示很清楚，大家可以去官网查看，vue-loader配置。

总结

vue-loader 的总结大部分源自官网介绍，通过上面的使用我们可以完成一个简单的 vue-loader 配置及使用。

十二、VUE-Style-Loader

vue-style-loader

vue-style-loader 是基于 style-loader 的分支，功能与 style-loader 类似，都可以与 css-loader 链接将 style 标签注入到文档中，vue-style-loader 一般不需要自己配置加载，因为他已经作为依赖项包含在 vue-loader 中。vue-style-loader 除了将 style 注入到文档中，还做了一些服务端渲染的支持，所以如果我们 vue 项目中需要做服务端渲染，可能就要使用 vue-style-loader 来插入样式了。

使用

vue-style-loader 的使用方法与 style-loader 类似。都是与 css-loader 链接起来使用。

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>vue-style-loader</title>
    </head>
    <body>
    </body>
</html>

index.js

import indexCss from "./index.css";
const divElement = document.createElement("div");
divElement.className = "demo";
divElement.innerHTML = 'vue-style-loader';
document.body.appendChild(divElement);

index.css

.demo {
    color: red;
}

安装 vue-style-loader

npm install vue-style-loader --save-dev

安装成功后，将 vue-style-loader 配置到 webpack.config.js 中。

module.exports = {
...
  rules: [
    {
      test: /\.css$/,
      use: [
          'vue-style-loader',
          'css-loader'
      ]
    }
  ]
};

打包成功后，打开 dist/index.html 可以看到浏览器中文字颜色已经变成红色，在控制台 element 中可以看到 index.css 中的样式属性已经被包裹了 style 标签并插入到 head 中。

配置项

vue-style-loader 参数配置。

  • manualInject
  • ssrId

manualInject

默认值：无

值类型：Boolean

作用：当 manualInject 参数值为 true 时，导入的样式对象会提供一个__inject__方法，然后可以在适当的时间手动调用该方法。此方法接收一个对象参数，最后将样式文件内容绑定到传入的对象上。

注意：只有运行环境为 Node.js 且 manualInject 为 true 时，样式对象才会提供__inject__方法。

webpack.config.js

module.exports = {
  ...
  {
    test: /\.svg/,
    use: [
      {
        loader: 'vue-style-loader',
        options: {
          manualInject: true,
        }
      },
    ]
  }
};

ssrId

默认值：无

值类型：Boolean

作用：向 style 标签添加 data-vue-ssr-id 属性，可以用作预渲染避免样式重复注入。

webpack.config.js

module.exports = {
  ...
  {
    test: /\.svg/,
    use: [
      {
        loader: 'vue-style-loader',
        options: {
          ssrId: true
        }
      },
    ]
  }
};

区别于 style-loader

  • 如果你正在构建一个 Vue SSR 应用程序，你可能也应该使用这个加载器来处理从 JavaScript 文件导入的 CSS
  • 不支持 url 模式和引用计数模式。还删除了 singleton 和insertAt 查询选项。不支持样式懒加载。如果您需要这些功能，您可能应该使用原始功能 style-loader。

总结

本章节我们介绍了 vue-style-loader 的使用、配置和它与 style-loader 的区别，vue-style-loader 支持 vue 中的 ssr（服务端渲染），所以如果需要支持服务端渲染的 vue 项目，就需要用到 vue-style-loader 了。但是如果是一般的项目，style-laoder 的功能会更多些。

阅读量：2015

点赞量：0

收藏量:0