const path = require('path')
const glob = require('glob')
var webpack = require('webpack')
const htmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')

const entryFiles = glob.sync(path.join(__dirname, './src/mobile/*.html'))
const htmlWebpackPlugins = []

entryFiles.map((entryFile) => {
  const matchRes = entryFile.match(/src\/mobile\/(.*)\.html$/)
  const pageName = matchRes && matchRes[1]
  console.log(pageName)
  htmlWebpackPlugins.push(
    new htmlWebpackPlugin({
      template: path.join(__dirname, `./src/mobile/${pageName}.html`),
      filename: `${pageName}.html`,
      inject: 'body',
    }),
  )
})

module.exports = {
  mode: 'production',
  // mode: 'development',
  entry: './src/mobile/js/app.js',
  output: {
    path: path.resolve(__dirname, 'dist/mobile'),
    filename: 'js/[name]-[hash].js',
    publicPath: './',
    assetModuleFilename: 'img/[hash][ext][query]',
    clean: true
  },

  module: {
    rules: [
      {
        test: /\.(png|jpg|gif|jpeg|svg)$/,
        // type: 'asset/resource',
        dependency: { not: ['url'] },
        loader: 'url-loader',
        options: {
          name: '[hash].[ext][query]',
          limit: 1024 * 10,
          outputPath: 'img',
        },
      },
      {
        test: /\.ico$/i,
        dependency: { not: ['url'] },
        loader: 'url-loader',
        options: {
          limit: 1,
          name: '[name].[hash:5].[ext]',
        },
      },
      {
        test: /\.mp4$/i,
        dependency: { not: ['url'] },
        loader: 'url-loader',
        options: {
          limit: 1,
          name: '[name].[hash:5].[ext]',
        },
      },
      {
        test: /\.(woff|ttf|svg|eot)$/,
        use: ['url-loader'],
      },
      {
        test: /\.xml/,
        type: 'asset/resource',
        generator: {
            filename: 'sitemap.xml',
        },
      },
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, { loader: 'css-loader' }],
      },
      {
        test: /.html$/,
        use: [
          {
            loader: 'html-loader',
            options: {
              esModule: false,
              sources: {
                list: [
                  '...',
                  {
                    tag: 'a',
                    attribute: 'data-bigimg',
                    type: 'src',
                  },
                  {
                    tag: 'a',
                    attribute: 'data-imgdetail',
                    type: 'src',
                  },
                  {
                    tag: 'a',
                    attribute: 'data-movie',
                    type: 'src',
                  },
                ],
              },
            },
          },
          'template-ejs-loader',
        ],
      },
    ],
  },
  plugins: [new MiniCssExtractPlugin({
    filename: '[name].[hash:6].css'
  })].concat(htmlWebpackPlugins),
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
    minimize: true,
    minimizer: [
      new TerserPlugin({
        extractComments: false,
      }),
      new OptimizeCssAssetsPlugin(),
    ],
  },
}