const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");
const { DefinePlugin } = require('webpack');
const TerserPlugin = require("terser-webpack-plugin");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
const { VantResolver } = require('@vant/auto-import-resolver');
const AutoImport = require('unplugin-auto-import/webpack');
const Components = require('unplugin-vue-components/webpack');

module.exports = {
  mode: 'production', // 生产模式,会开启 tree-shaking 和 压缩代码，以及其他优化
  entry: { // 后续需要上传哪个组件单独配置入口，其余注释
    list: '@/views/templates/cmsList/index.ts',
    detail: '@/views/templates/cmsDetail/index.ts',
    cmsLJJConfig: '@/views/templates/cmsLJJConfig/index.ts',
    // ...
  },
  output: {
    path: path.join(__dirname, '../dist'),
    filename: '[name]/[name]_com.[chunkhash:8].chunk.js',
    library: {
      name: 'TempCom',
      type: 'umd', // 使用 UMD 模式以支持多种引入方式
    },
    publicPath: '/',
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        exclude: /node_modules/,
        use: ['thread-loader', 'vue-loader'],
      },
      {
        test: /\.(js|ts)$/,
        exclude: /node_modules/,
        use: ['thread-loader', 'babel-loader'],
      },
      {
        test: /\.css$/,
        use: ['vue-style-loader', 'css-loader'],
      },
      {
        test: /\.scss$/,
        use: ['vue-style-loader', 'css-loader', 'sass-loader']
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(), // vue-loader 插件
    // new BundleAnalyzerPlugin(),
    AutoImport({ resolvers: [VantResolver()] }),
    Components({ resolvers: [VantResolver()] }),
    new DefinePlugin({
      'process.env.mode': JSON.stringify(process.env.NODE_ENV),
    }),
  ],
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true, // 移除所有的`console`语句
          },
          output: {
            comments: false, // 去掉注释
          },
        },
        extractComments: false, // 不从代码中提取注释
      }),
    ],
  },
  resolve: {
    // 如果用的是pnpm 不要配置这个，会有幽灵依赖的问题，访问不到很多模块
    // 查找第三方模块只在本项目的node_modules中查找
    modules: [path.resolve(__dirname, '../node_modules')],

    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
     alias: {
      '@': path.join(__dirname, '../src')
    }
  },
}