webpack 静态资源文件加载（assets）

最新推荐文章于 2024-11-28 00:40:13 发布

Rick_Jci

最新推荐文章于 2024-11-28 00:40:13 发布

阅读量1k

点赞数

分类专栏： webpack 文章标签： webpack 前端 javascript

本文链接：https://blog.csdn.net/qq_37905131/article/details/126089809

版权

webpack 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了在webpack5中如何配置图片资源的加载和输出，包括type参数的使用，自定义资源目录，以及在js、css、html中引入图片的不同方式。解析了如何通过设置dataUrlCondition.maxSize来决定图片是否转换为base64，并通过generator.filename定制输出路径。同时强调了当generator和output.assetModuleFilename同时存在时，generator优先。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 图片资源加载

type 参数详解
- asset/resource 发送一个单独的文件并导出 URL
- asset/inline 导出一个资源的 data URI
- asset/source 导出资源的源代码
- asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现

{
  test: /\.(png|jpe?g|gif|webp|svg)$/,
  type: 'asset', 
  parser: {
    dataUrlCondition: {
      maxSize: 4 * 1024 // 4kb 以下打包base64
    }
   }
}

2. 资源目录的自定义

2.1 修改output,做一下对比

// 未修改  
output: {
    filename: 'dist.js',
    path: path.join(__dirname, '/dist'),
    clean: true,
  },

// 修改后
    output: {
      filename: 'js/dist.js', // js入口文件的输出目录修改
      path: path.join(__dirname, '/dist'),
      clean: true,
      assetModuleFilename: 'assets/[hash:8][ext]' // 资源目录整体修改
    },

2.2 rules配置中增加 generator 配置项

{
  test: /\.(png|jpe?g|gif|webp|svg)$/,
  type: 'asset', // 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现。
  parser: { // 设置解析规则（主要是图片资源的base64的转化规则）
    dataUrlCondition: {
      maxSize: 4 * 1024 // 4kb 以下打包base64
    }
  },
  generator: { // 配置图片资源的输出目录
    filename: 'static/images/[hash:8][ext]'
  }
}

2.3 说明：两种修改方式同时出现时，以generator 为准

3. 图片资源的几种引入方式分析

js文件中引入（webpack5内置的 asset module 处理）

import jpg1 from './assets/3.jpeg'
//output -> "jpg1": http://127.0.0.1:5500/dist/static/images/401cf448.jpeg

css文件中引入（css-loader处理）

background-image: url('../assets/4.jpeg');

html文件中引入（html-loader处理）

<img src="./src/assets/5.jpeg" alt="" />

html-loader 需要单独安装和配置
```
npm install html-loader -D
```

{
  test: /\.html$/i,
  loader: "html-loader",
},