import { resolve } from 'path'
import HtmlWebpackPlugin from 'html-webpack-plugin'
import { VueLoaderPlugin } from 'vue-loader'
import Components from 'unplugin-vue-components/webpack'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { CleanWebpackPlugin } from 'clean-webpack-plugin';

//这个自动导入暂时没有搞好
// @ts-ignore
//import AutoImport from 'unplugin-auto-import/webpack';

const mode: 'production' | 'development' =
  (process.env.MODE as any) ?? 'development'

const viewConfig = {
    mode,
    entry: {
      app: resolve('src', 'pages', 'treeView', 'main.ts'),
    },
    output: {
      filename: 'js/[name].[hash:6].bundle.js',
      path: resolve('out', 'webviewTree')
    },
    resolve: {
      extensions: ['.ts', '.js', '.mjs', '.json', '.vue', '.css', '.cjs'],
      alias: {
        'vue$': 'vue/dist/vue.esm-bundler.js',
        '@': resolve(__dirname, '../src')
      }
    },
    module: {
      rules: [
        {
          test: /\.mjs$/i,
          resolve: { byDependency: { esm: { fullySpecified: false } } },
        },
        { test: /\.vue$/, loader: 'vue-loader' },
        {
          test: /\.m?[tj]s$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
        },
        {
          test: /\.css$/,
          use: ['vue-style-loader', 'css-loader'],
        },
      ],
    },
    plugins: [
      new CleanWebpackPlugin(),
      new VueLoaderPlugin(),
      new HtmlWebpackPlugin({ inject: true, template: './src/pages/treeView/index.html', filename: 'index.html' }),
      Components({
        resolvers: [ElementPlusResolver({})],
        dts: resolve('src', 'pages', 'treeView', 'components.d.ts'),
      }),
      // AutoImport({
      //   resolvers: [ElementPlusResolver({})],
      //   dts: resolve('src', 'auto-imports.d.ts'),
      // })
    ],
    devtool: mode === 'production' ? false : 'source-map',
    devServer: {
      static: "out/webviewTree",
      hot: true,
      port:8082
      }
}

const panelConfig = {
  mode,
  entry: {
    app: resolve('src', 'pages', 'panel', 'main.ts'),
  },
  output: {
		filename: 'js/[name].[hash:6].bundle.js',
		path: resolve(__dirname, 'out', 'webviewPanel')
	},
  resolve: {
    extensions: ['.ts', '.js', '.mjs', '.json', '.vue', '.css', '.cjs'],
    alias: {
			'vue$': 'vue/dist/vue.esm-bundler.js',
			'@': resolve(__dirname, '../src')
    }
  },
  module: {
    rules: [
      {
        test: /\.mjs$/i,
        resolve: { byDependency: { esm: { fullySpecified: false } } },
      },
      { test: /\.vue$/, loader: 'vue-loader' },
      {
        test: /\.m?[tj]s$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: ['vue-style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({ inject: true, template: './src/pages/panel/index.html', filename: 'index.html' }),
    Components({
      resolvers: [ElementPlusResolver({})],
      dts: resolve('src', 'pages', 'panel', 'components.d.ts'),
    }),
    // AutoImport({
    //   resolvers: [ElementPlusResolver({})],
    //   dts: resolve('src', 'auto-imports.d.ts'),
    // })
  ],
  devtool: mode === 'production' ? false : 'source-map',
  devServer: {
		static: "out/webviewPanel",
		hot: true,
	  }
}
const extensionConfig = {
  target: 'node', // VS Code extensions run in a Node.js-context 📖 -> https://webpack.js.org/configuration/node/
	mode, // this leaves the source code as close as possible to the original (when packaging we set this to 'production')

  entry: './src/extension.ts', // the entry point of this extension, 📖 -> https://webpack.js.org/configuration/entry-context/
  output: {
    // the bundle is stored in the 'dist' folder (check package.json), 📖 -> https://webpack.js.org/configuration/output/
    path: resolve(__dirname, 'out'),
    filename: 'extension.js',
    libraryTarget: 'commonjs2'
  },
  externals: {
    vscode: 'commonjs vscode' // the vscode-module is created on-the-fly and must be excluded. Add other modules that cannot be webpack'ed, 📖 -> https://webpack.js.org/configuration/externals/
    // modules added here also need to be added in the .vscodeignore file
  },
  resolve: {
    // support reading TypeScript and JavaScript files, 📖 -> https://github.com/TypeStrong/ts-loader
    extensions: ['.ts', '.js']
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'ts-loader'
          }
        ]
      }
    ]
  },
  devtool: mode === 'production' ? false : 'source-map',
  infrastructureLogging: {
    level: "log", // enables logging required for problem matchers
  },
};
export default [ panelConfig, extensionConfig ];