日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

webpack-loader: url-loader

作者：小強有個dream 更新時間： 2022-04-04 編程語言

用于將文件轉換為base64 URI的webpack加載程序。

options

limit limit指定文件大小，小于limit的圖片不會生成圖片以base64格式被引入，大于limit的圖片將以url加載

在這里插入圖片描述示例

/src/index.js

import '/src/css/image.css'
let img = require('/src/imgs/2.png')
// import img from '/src/imgs/2.png'

let dom = document.createElement('div')
dom.className = 'img1'

document.body.appendChild(dom)

/src/webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 40
            }
          }
        ]
      },
      {
        test: /\.css$/,
        use: [ 'style-loader', {
          loader: 'css-loader',
          options: {
            esModule: false // css-loader遇到url會按照require進行導入,而require默認返回包裹default的esmodule
          }
        }]
      }
    ],
  }
}

/src/css/image.css

.img1 {
  width: 200px;
  height: 200px;
  background: url(../imgs/1.png);
}

/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="./dist/main.js"></script>
</body>
</html>

原文鏈接：https://blog.csdn.net/qq_36413371/article/details/123493116

欄目分類
最近更新