死命简单的webpack（3）-引用svg

时间 2020-12-01

标签 javascript css html java webpack git github web npm 浏览器栏目 JavaScript 繁體版

原文原文链接

如今，咱们已经能够引入js文件、css文件。若是是图片呢？答案是能够。本文以svg图片为例，在css内引用它。从一个案例开始：javascript

//c.html
<html>
  <body>
    <div>Hello css</div>
    <script type="text/javascript" src="bundle.js"></script>
  </body>
</html>

咱们但愿经过css来让div变成红色的字体，文件为：css

//b.css
div{
    color:red;
    background: url(./success.svg);
    display: inline-block;
}

依然在js的入口文件内引用此css：html

require("./b.css")

并修改webpack的配置文件，除了使用css-loader、style-loader加载css外，还须要加入一个新的loader：java

// webpack.config.js
module.exports = {
  entry: './a.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders:[
      { test: /\.css$/, loader: 'style-loader!css-loader' },
       {test: /\.svg/, loader: 'svg-url-loader'}
    ]
  },
  url: {
        dataUrlLimit: 1024
  }
};

代码dataUrlLimit: 1024是为了告诉svg-url-loader，若是装载的svg大小低于1024字节，那么直接采用base64把内容编码到url内，不然就采用文件引用的形式。webpack

由于须要引入模块svg-url-loader咱们须要安装一下：git

npm i svg-url-loader --save-dev

随后是熟悉的转译:github

webpack

如今工做所有作完，能够用浏览器打开文件c.html，发现html内的文字有了一个图片背景。说明引入svg已经生效了。web

全系列文章的代码在这里：https://github.com/1000copy/w...npm

关于

做者：刘传君
建立过产品，创过业。很差动，读书机器。
能够经过 1000copy#gmail.com 联系到我浏览器

出品

http小书 http://www.ituring.com.cn/boo...
Git小书 http://www.ituring.com.cn/boo...