/*
 * @Author: ChaiHongJun
 * @Date: 2021-08-11 08:52:36
 * @LastEditors: ChaiHongJun
 * @LastEditTime: 2021-08-16 17:46:41
 * @version: 
 * @Description: 
 */
/**
 *公共基础配置文件
 *
 *
*/
const { resolve } = require('path');
// const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const StylelintPlugin = require('stylelint-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const chalk = require('chalk')
const ProgressBarPlugin = require('progress-bar-webpack-plugin')

// const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
// 通用Style Loader
const CommonStyleLoader = [
  MiniCssExtractPlugin.loader,
  'css-loader',
  'postcss-loader',
]
module.exports = {
  devtool: 'eval-cheap-module-source-map',
  entry: './src/index.js',
  output: {
    filename: '[name].js',
    path: resolve(__dirname, 'dist'),
    pathinfo: false
  },
  module: {
    rules: [
      // 使用资源模块处理字体
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/i,
        type: 'asset/resource',
        include: resolve(__dirname, 'src/fonts'),
        generator: {
          filename: 'fonts/[name].[hash:5][ext]'
        }
      },
      //处理CSS
      {
        test: /\.css$/,
        include: resolve(__dirname, 'src/style'),
        use: CommonStyleLoader
      },
      // 处理Less
      {
        test: /\.less$/,
        include: resolve(__dirname, 'src/style'),
        use: [
          // 'style-loader',
          ...CommonStyleLoader,
          {
            loader: 'thread-loader',
            options: {
              workerParallelJobs: 2
            }
          },
          'less-loader'
        ]
      },
      // 资源模块处理图片
      {
        test: /\.(png|jpe?g|gif)$/i,
        type: "asset",
        include: [resolve(__dirname, 'src/images'), resolve(__dirname, 'src/style')],
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024 // 8kb
          }
        },
        generator: {
          filename: 'images/[name].[hash:5][ext]'
        }
      },
      // 打包html中的图片
      // {
      //   test: /\.html$/,
      //   loader: "html-loader",
      //   options: {
      //     minimize: false,
      //     esModule: false,
      //   }
      // },
      // 编译JS
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/, //排除本地需要编译的目录
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              [
                "@babel/preset-env",
                {
                  //按需转换JS
                  useBuiltIns: "usage",
                  // corejs 版本
                  corejs: 3,
                  targets: "defaults",
                }
              ]
            ]
          }
        }
      }
    ]
  },
  plugins: [
    // 打包前 清理输出目录
    new CleanWebpackPlugin(),
    //提取CSS到单独的CSS文件
    new MiniCssExtractPlugin({
      filename: "style/[name].[hash:5].css",
    }),
    new StylelintPlugin({
      //指定检查源文件所在目录
      files: ["./src/style/*.(css|less)"]
    }),
    // 进度条
    new ProgressBarPlugin({
      format: `  :msg [:bar] ${chalk.green.bold(':percent')} (:elapsed s)`
    })
  ],

  devServer: {
    contentBase: resolve(__dirname, 'dist'),
    host: 'localhost',  // 配置启动ip地址
    port: 9090,  // 配置端口
    open: true, // 配置是否自动打开浏览器
    compress: true,
    liveReload: true, //热更新
    //配置代理 解决跨域
    proxy: {
      // http://localhost:8080/api
      "/api": {    // 这里的`/api`是自定义的
        // http://localhost:8080/api/users = >  https://api.github.com/api/users
        target: "https://api.github.com/", //这里是真实的接口baseURL
        //http://localhost:8080 => https://api.github.com
        changeOrigin: true,
        ws: true,
        secure: false,
        pathRewrite: {
          //去掉 '/api/'
          // http://localhost:8080/api/users = >  https://api.github.com/users
          "^/api": "", // 这里的`^/api`也是是自定义的
        },
      },
    }
  },
  target: 'web', //热更新


}