const path = require('path')

// webpack 插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin') // 清除目录
const HtmlWebpackPlugin = require('html-webpack-plugin') // 根据模板生成 html

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

// 定义输出的目录
const outputPath = path.resolve(__dirname, 'dist')

module.exports = {
  // 单入口 -> 单输出
  entry: {
    main: './src/index.js'
  },
  output: {
    filename: `js/${hashRule}.js`,
    // 指定输出的目录
    path: outputPath,
    publicPath: './'
  },
  plugins: [
    new CleanWebpackPlugin({
      // 在每次打包前调用：删除输出的目录
      cleanOnceBeforeBuildPatterns: [outputPath]
    }),
    new HtmlWebpackPlugin({
      template: 'public/index.html', // html 模板位置
      favicon: 'public/favicon.ico', // html favicon 位置
      filename: 'index.html', // html 生成模板名
      chunks: ['main'], // 匹配 entry 的key
      title: '5.html-css', // html 标题
      meta: {
        viewport:
          'width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no', // html 自适应移动端
        description: 'webpack5从不会到入门' // html 描述
      },
      minify: {
        removeComments: true, // html 删除注释
        collapseWhitespace: true // html 删除空白符与换行符
      }
    })
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除 node_modules 中引入的 js 文件
        use: ['babel-loader'] // 第三方 loader 通过 use 调用
      },
      // 图片 > 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' },
      {
        test: /\.(css|scss)$/,
        // loader 的执行顺序是从下到上，从右到左
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              // css 中通过 @import 引入的文件，也要先执行 sass-loader + postcss-loader
              importLoaders: 2
            }
          },
          'postcss-loader',
          'sass-loader'
        ]
      }
    ]
  }
}