/*
 * @Description: webpack基本配置
 *   .--,       .--,
 *   ( ( \.---./ ) )
 *   '.__/o   o\__.'
 *      {=  ^  =}
 *       >  -  <
 *      /      \
 *     // blog  \\
 *    //|   .   |\\
 *    "'\       /'"_.-~^`'-.
 *       \  _  /--'
 *     ___)( )(___
 *    (((__) (__)))
 * @Author: Mainkeys
 * @Date: 2023-09-17 10:11:01
 * @LastEditTime: 2023-09-18 23:07:30
 * @LastEditors: Mainkeys
 */

const os = require('os');
const path = require('path');
const HtmlWebpackplugins = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
  devServer: {
    static: './dist',
    open: true,
    host: 'local-ip',
    port: 3000,
    onListening({ server }) {
      const { address: addr, port } = server.address();
      console.log(`🐀🐀博客，启动！ http://${addr}:${port}`);
    }
  },
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  resolve: {
    modules: [
      path.resolve(__dirname, 'node_modules'),
      path.resolve(__dirname, 'src'),
    ],
    extensions: ['.vue', '.js', '.css', '.less', '.json'],
    alias: {
      vue$: 'vue/dist/vue.esm.js',
      '@': path.resolve('src'),
      '@img': path.resolve('src/assets/images/'),
      '@icons': path.resolve('src/assets/icons'),
      '@common': path.resolve('src/components'),
    }
  },
  cache: {
    type: 'filesystem',
    profile: true,
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['css-loader'],
      },
      {
        test: /\.(js|vue)$/,
        include: /src/,
        exclude: /node_modules/,
        enforce: 'pre',
        use: [
          {
            loader: 'thread-loader',
            options: {
              workers: os.cpus().length
            }
          },
          {
            loader: 'eslint-loader'
          }
        ]
      },
      {
        test: /\.vue$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'thread-loader',
            options: {
              workers: os.cpus().length
            }
          },
          {
            loader: 'vue-loader'
          }
        ]
      },
      { test: /\.s[ac]ss/, use: ['style-loader', 'css-loader', 'sass-loader'] },
      {
        test: /\.m?js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          }
        }
      },
      // { test: /\.(png|jpe?g|gif|svg|webp)$/, use: { loader: 'file-loader', options: { esModule: false } } },
      {
        test: /\.(png|jpe?g|gif|svg|webp)$/,
        type: 'asset/resource'
      },
      {
        oneOf: [
          {
            test: /\.js$/,
            use: [
              {
                loader: 'thread-loader',
                options: {
                  workers: os.cpus().length
                }
              },
              {
                loader: 'babel-loader',
                options: {
                  // 开启babel编译缓存
                  cacheDirectory: true,
                  // 缓存文件不要压缩
                  cacheCompression: false
                }
              }
            ]
          },
          {
            test: /\.(png|jpg|gif|jpeg|svg)$/,
            exclude: /node_modules/,
            use: [
              {
                loader: 'url-loader',
                options: {
                  limit: 10240,
                  name: '/static/images/[name]_[contenthash].[ext]',
                  esModule: false
                }
              }
            ]
          },
          {
            test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
            exclude: /node_modules/,
            use: [
              {
                loader: 'file-loader',
                options: {
                  name: '/static/css/fonts/[name]_[contenthash].[ext]'
                }
              }
            ]
          },
          {
            test: /\.(woff|svg|woff2|eot|ttf|otf)$/,
            exclude: /node_modules/,
            use: [
              {
                loader: 'file-loader',
                options: {
                  name: '/static/css/fonts/[name]_[contenthash].[ext]'
                }
              }
            ]
          },
          {
            test: /\.(woff|svg|woff2|eot|ttf|otf)(\?.*)?$/,
            include: /node_modules[\\/]vxe-table/,
            loader: 'url-loader'
          }
        ]
      }
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackplugins({
      template: path.resolve('index.html'),
      favicon: path.resolve('favicon.ico'),
      chunks: ['main'],
      inject: true,
      minify: {
        html5: true,
        collapseWhitespace: true,
        removeComments: true,
        minifyCSS: true,
        minifyJS: true,
        preserveLineBreaks: false
      }
    }),
    new VueLoaderPlugin(),
  ],
  mode: 'development'
};