死命簡單的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