网站首页编程语言正文

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

上一篇：webpack-plugins: plugin的使用 cle
下一篇：webpack-loaders： postcss

网站首页 编程语言 正文

webpack-loader: url-loader

options

相关推荐

网站首页编程语言正文