/**
 * @file webpack 配置文件
 */
const path = require('path')

const CleanWebpackPlugin = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const { VueLoaderPlugin } = require('vue-loader')
const hashDigestLength = 6 // 文件名末尾 hash 值长度
/**
 * webpack 配置项
 * @param {Object} env - 环境对象
 * @param {Object} argv - 命令行参数选项
 * @param {String} argv.mode - 模式
 */
module.exports = function (env = {}, argv) {
  let productionEnv = (!argv.host && argv.mode == 'production');  //生产环境下打包情况不一样，先清除旧的dist，部分文件的publicPath也不一样
  let config = {
    devtool: productionEnv ? '' : 'source-map',

    resolve: {
      alias: {
        '@': path.resolve(__dirname, '../src'),
        components: path.resolve(__dirname, '../src/components'),
        images: path.resolve(__dirname, '../src/images'),
        modules: path.resolve(__dirname, '../src/modules'),
        scripts: path.resolve(__dirname, '../src/scripts'),
        styles: path.resolve(__dirname, '../src/styles'),
      }
    },

    entry: {
      app: './src/scripts',
    },

    output: {
      // filename: 'scripts/[name]_[chunkhash].js',
      filename: 'scripts/[name].js',
      hashDigestLength,
      // path: path.resolve(__dirname, productionEnv ? '../../dist/m/' : '../dist/'),
      path: path.resolve(__dirname, productionEnv ? '../dist/' : '../dist/'),
    },

    module: {
      rules: [{
        test: /\.(jpg|png|svg|gif)$/,
        use: [{
          loader: 'file-loader',
          options: {
            // name: `[name]_[hash:${hashDigestLength}].[ext]`,
            name: `[name].[ext]`,
            outputPath: 'images',
            publicPath: productionEnv ? '/images/' : '/images/',
            //https://inside.wx.luckyxp.com.cn/webup/data/User/wxtest/home/project/lls-m/dist/images/
          }
        }]
      }, {
        test: /\.(woff|ttf|woff2|eot)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'styles',
              publicPath: './'
            }
          }
        ]
      }, {
        test: /\.(css|postcss)$/,
        use: [{
          loader: MiniCssExtractPlugin.loader
        }, {
          loader: 'css-loader',
          options: {
            importLoaders: 1
          }
        }, {
          loader: 'postcss-loader',
        }]
      }, {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [{
          loader: 'babel-loader'
        }]
      }, {
        test: /\.vue$/,
        use: [{
          loader: 'vue-loader',
          options: {
            compilerOptions: {
              preserveWhitespace: false
            }
          }
        }]
      }]
    },

    plugins: [
      new VueLoaderPlugin(),
      new MiniCssExtractPlugin({
        filename: 'styles/[name]_[chunkhash].css'
        // filename: 'styles/[name].css'
      }),
      new HtmlWebpackPlugin({
        title: 'AFK Journey',
        template: './src/index.html',
      })
    ],

    optimization: {
      runtimeChunk: {
        name: 'manifest'
      },
      splitChunks: {
        chunks: 'all',
        minChunks: 2
      }
    },

    performance: {
      hints: false
    },

    devServer: {
      contentBase: path.join(__dirname, '../'),
      disableHostCheck: true,
      open: true,
      host: 'localhost',
      // host: '192.168.17.6',
      // host: 'inside.wx.luckyxp.com.cn',
      port: 8001,
      proxy: {
      }
    }
  }

  config.plugins = config.plugins.concat([
    // new CleanWebpackPlugin([productionEnv ? 'm' : 'dist'], {
    //   root: path.join(__dirname, productionEnv ? '../../dist/' : '../')
    // }),
    new CleanWebpackPlugin(['dist'], {
      root: path.join(__dirname, '../')
    }),
  ])

  return config
}