// 一.nodejs 模块
const path = require('path')

// 二.webpack 插件
const { DefinePlugin } = require('webpack')
const { merge } = require('webpack-merge')
const { CleanWebpackPlugin } = require('clean-webpack-plugin') // 清除目录
const HtmlWebpackPlugin = require('html-webpack-plugin') // 根据模板生成 html
const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 提取 css
const TerserWebpackPlugin = require('terser-webpack-plugin') // 压缩 js
const { VueLoaderPlugin } = require('vue-loader') // vue sfc 文件识别

// 三.全局变量
// 生成文件名 hash 规则
const hashRule = '[name]_[contenthash:8]'
// 定义输出的目录
const outputPath = path.resolve(__dirname, 'dist')
// css 公共 loader
const cssLoader = [
  {
    loader: 'css-loader',
    options: {
      // css 中通过 @import 引入的文件，也要先执行 sass-loader + postcss-loader
      importLoaders: 2
    }
  },
  'postcss-loader',
  'sass-loader'
]

// 四.公共配置
const commonConfig = {
  // 单入口 -> 单输出
  entry: {
    // 更换为 main.js
    main: './src/main.js'
  },
  output: {
    filename: `js/${hashRule}.js`,
    // 指定输出的目录
    path: outputPath
  },
  resolve: {
    // 路径别名：js -> '@/'、css -> '~@/'
    alias: {
      '@': path.resolve(__dirname, 'src')
    },
    // 默认扩展名：.js 必须存在，否则 node_modules 中的文件无法解析
    extensions: ['.js', '.vue'] // 加入 vue sfc 扩展名
  },
  plugins: [
    new DefinePlugin({
      __VUE_OPTIONS_API__: true, // vue3 开启 options api
      __VUE_PROD_DEVTOOLS__: false // vue3 在生产环境中禁用 devtools 支持
    }),
    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: '7.create-vue', // 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 删除空白符与换行符
      }
    }),
    new VueLoaderPlugin() // 配置 vue-loader 内置插件
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除 node_modules 中引入的 js 文件
        use: ['babel-loader'] // 第三方 loader 通过 use 调用
      },
      // 识别 vue 文件
      {
        test: /\.vue$/,
        use: ['vue-loader']
      },
      // 图片 > 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' }
    ]
  }
}

// 五.开发环境配置
const devConfig = {
  mode: 'development',
  // 精确到行生成 source map
  devtool: 'eval-cheap-module-source-map',
  output: {
    publicPath: '/' // 静态资源的公共路径需要设定为当前项目根路径
  },
  devServer: {
    static: {
      directory: outputPath // 静态文件目录
    },
    port: 3000, // 端口号
    historyApiFallback: true, // 支持单页应用 history 路由 fallback
    open: false, // 禁止自动打开浏览器
    hot: true, // 开启热模块重载功能 hmr
    compress: true, // 开启 gzip 压缩
    client: {
      overlay: true, // 在浏览器端显示编译错误
      progress: false // 在浏览器端打印编译进度
    }
  },
  module: {
    rules: [
      {
        test: /\.(css|scss)$/,
        // loader 的执行顺序是从下到上，从右到左
        use: ['style-loader', ...cssLoader]
      }
    ]
  }
}

// 六.生产环境配置
const prodConfig = {
  mode: 'production',
  // 关闭 source map
  devtool: false,
  output: {
    publicPath: './'
  },
  plugins: [
    new MiniCssExtractPlugin({
      // 抽离 css 文件名
      filename: `css/${hashRule}.css`,
      // 抽离 css chunk 文件名
      chunkFilename: `css/${hashRule}.chunk.css`
    })
  ],
  module: {
    rules: [
      {
        test: /\.(css|scss)$/,
        // loader 的执行顺序是从下到上，从右到左
        use: [
          MiniCssExtractPlugin.loader, // mini-css-extract-plugin 自带的 loader
          ...cssLoader
        ]
      }
    ]
  },
  optimization: {
    minimizer: [
      new TerserWebpackPlugin({
        parallel: true, // 开启多进程压缩 js
        terserOptions: {
          compress: {
            drop_console: true, // 删除 console
            drop_debugger: true // 删除 debugger
          }
        }
      }),
      '...' // 其余保持默认值
    ]
  }
}

// 通过环境变量判断合并开发环境还是生产环境配置
module.exports = merge(
  commonConfig,
  process.env.NODE_ENV == 'development' ? devConfig : prodConfig
)