const path = require('path')

// 生成文件名 hash 规则
const hashRule = '[name]_[contenthash:8]'

module.exports = {
  // 单入口 -> 单输出
  entry: {
    main: './src/index.js'
  },
  output: {
    // 打包 js 文件也遵循这个命名原则
    filename: `js/${hashRule}.js`,
    path: path.resolve(__dirname, 'dist'),
    publicPath: './'
  },
  module: {
    rules: [
      // 图片 > 100kb 复制到输出目录并将其 url 内联到打包输出的 js 中
      // 图片 < 100kb 作为 dataURI 内联到打包输出的 js 中
      {
        test: /\.(jpg|jpeg|png|gif|bmp|webp|svg|hdr)$/,
        type: 'asset',
        generator: {
          filename: `image/${hashRule}[ext]` // [ext] 代表输出文件原本的扩展名
        },
        parser: {
          dataUrlCondition: {
            maxSize: 100 * 1024 // 临界值设定为 100kb
          }
        }
      },
      // 字体：复制到输出目录并将其 url 内联到打包输出的 js 中
      {
        test: /\.(eot|ttf|woff|woff2|fnt)$/,
        type: 'asset/resource',
        generator: {
          filename: `font/${hashRule}[ext]`
        }
      },
      // 音视频：复制到输出目录并将其 url 内联到打包输出的 js 中
      {
        test: /\.(mp3|mp4|wav)$/,
        type: 'asset/resource',
        generator: {
          filename: `media/${hashRule}[ext]`
        }
      },
      // json、xml：复制到输出目录并将其 url 内联到打包输出的 js 中
      {
        test: /\.(json|xml)$/,
        type: 'asset/resource',
        generator: {
          filename: `file/${hashRule}[ext]`
        }
      },
      // 着色器语言：将文件作为字符串内联到打包输出的 js 中
      { test: /\.glsl$/, type: 'asset/source' }
    ]
  }
}