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

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
    }
   }
}
1
2
3
4
5
6
7
8
9

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]' // 资源目录整体修改
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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]'
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

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
  1
  2

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

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

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

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

  • html-loader 需要单独安装和配置

  • npm install html-loader -D
    1

  • ​

  • {
      test: /\.html$/i,
      loader: "html-loader",
    },
    1
    2
    3
    4

  • ​