webpack：2 webpack5模块 asset (图片字体图标)

最新推荐文章于 2024-07-25 09:10:56 发布

小强有个dream

最新推荐文章于 2024-07-25 09:10:56 发布

阅读量527

点赞数

文章标签： webpack 前端 javascript

本文链接：https://blog.csdn.net/qq_36413371/article/details/123494638

版权

asset允许在不配置其它loader下使用资源文件（字体、图标等），
asset内置模块提供了4个loader
asset/resource 发出一个单独的文件并导出URL（等同于file-loader）
asset/inline 导出uri数据，（等同于url-loader）
asset/source 导出asset源代码（等同于raw-loader）
asset 自动导出URI和文件之间选择（等同于使用了limit的file-loader）
在webpack5中使用旧资产（file-loader url-loader raw-loader）会导致资源的重复,建议使用asset

自定义输出文件目录

通过修改output.assetModuleFilename来设置输出目录

自定义data URI generator

URL asset webpack支持new URL(‘./path/to/asset’, import.meta.url)创建资源模块

资源类型

webpack默认文件小于8kb的文件将被视为内联模块类型，否则将被视为资源模块类型。
可以通过Rule.parser.dataUrlCondition.maxSize option 来进行配置

示例-图片

/webpack.config.js

module.exports = {
  output: {
    assetModuleFilename: 'images/[hash][ext][query]'
  },
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 1000 * 1024 // 4kb
          }
        }
        // use: [
        //   {
        //     options: {
        //       limit: 40
        //     }
        //   }
        // ]
      },
      {
        test: /\.css$/,
        use: [ 'style-loader', {
          loader: 'css-loader',
          options: {
            esModule: false // css-loader遇到url会按照require进行导入,而require默认返回包裹default的esmodule
          }
        }]
      }
    ],
  }
}

/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/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>

示例-字体图标
/src/index.js

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

import '/src/iconfont/iconfont.css'
// import img from '/src/imgs/2.png'

let dom = document.createElement('i')
dom.className = 'iconfont icon-phone'

document.body.appendChild(dom)

/webpack.config.js

module.exports = {
  output: {
    assetModuleFilename: 'images/[hash][ext][query]'
  },
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 1000 * 1024 // 4kb
          }
        }
      },
      {
        test: /\.(eot|woff|ttf|svg)$/,
        type: 'asset/resource'
      },
      {
        test: /\.css$/,
        use: [ 'style-loader', {
          loader: 'css-loader',
          options: {
            esModule: false // css-loader遇到url会按照require进行导入,而require默认返回包裹default的esmodule
          }
        }]
      }
    ],
  }
}

/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>

小强有个dream

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
webpack：2 webpack5模块 asset (图片字体图标)

asset允许在不配置其它loader下使用资源文件（字体、图标等），asset内置模块提供了4个loaderasset/resource 发出一个单独的文件并导出URL（等同于file-loader）asset/inline 导出uri数据，（等同于url-loader）asset/source 导出asset源代码（等同于raw-loader）asset 自动导出URI和文件之间选择（等同于使用了limit的file-loader）在webpack5中使用旧资产（file-loader.
复制链接

扫一扫