const path=require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
//const { HtmlWebpackPlugin } = require("html-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
//const { VueLoaderPlugin } = require('vue-loader/dist/index');
const { VueLoaderPlugin } = require('vue-loader');

module.exports={
  entry:"./index.js",
  output:{
    filename:"bundle.js",
    path:path.resolve(__dirname,"./dist"),
    assetModuleFilename:"media/[name].[ext]",
  },
  resolve: {
    alias: {
      vue: 'vue/dist/vue.esm-bundler.js' // 关键配置
    }
  },
  module:{
    rules:[
      {
        test:/\.css$/i,
        use:["style-loader","css-loader"]
      },
     {
      test:/\.vue$/,
      use:[
        { loader:"vue-loader" }
      ]
    },
      // 处理 .js 文件
    {
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: /node_modules/
    },
    {
     test:/\.(png|jpe?g|gif|svg)$/i,
    //  use:[{ 
    //   loader:"file-loader",
    //   options:{
    //     limit: 512 * 1024,
    //     name: "[name].[ext]",
    //     outputPath:"media",
    //   },
    //  }]
      type: 'asset/resource',
      // generator:{
      //   filename: "[name].[ext]",
      // }
   },
   {
      test:/\.(woff2?|eof|ttf)$/i,
    //  use:[{ 
    //   loader:"file-loader",
    //   options:{
    //     limit: 512 * 1024,
    //     name: "[name].[ext]",
    //     outputPath:"media",
    //   },
    //  }]
      type: 'asset/resource',
      generator:{
        filename: "./font/[name].[ext]",
      }
  },]
  },
  plugins:[
    new VueLoaderPlugin(),
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      inject:'body',
      title:"webpack sample ",
      template:"./index.html"
    })
  ]
}