资源

资源

资源类型type：

• asset/resource发送一个单独的文件并导出 URL
• asset/inline导出一个资源的 Data URL
• asset/source导出资源的源代码
• asset导出一个 Data URL 和单独发送一个文件之间自动选择

文件：webpack.config.js

module.exports = {
  output: {
    // 优先 module 的 generator 然后 assetModuleFilename
    assetModuleFilename: 'images/[contenthash][ext]',
  },
  // 资源模块
  module: {
    // 规则
    rules: [
      {
        test: /\.png$/, // 什么类型的文件（正则表达式）
        type: 'asset',
        // 文件存储位置和文件名称
        generator: {
          /*
           * [contenthash]: 生成的 hash 值
           * [ext]: 原本的后缀名
           */
          filename: 'images/[contenthash][ext]',
        },
        // 分析 asset
        parser: {
          // 生成 Data URL 的条件
          dataUrlCondition: {
            maxSize: 4 * 1024 * 1024, // 文件最大值，默认：4 * 1024
          },
        },
      },
    ],
  },
}

import imgsrc from '资源图片路径'
const img = document.createElement('img')
img.src = imgsrc
document.body.appendChild(img)