wiki/webpack.config.js

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');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports={
  entry:{
    index:"./index.js",
  },
  output:{
    filename:"[name].js",
    path:path.resolve(__dirname,"./dist")
  },
  resolve: {
    alias: {
      vue: 'vue/dist/vue.esm-bundler.js' // 关键配置
    }
  },
  module:{
    rules:[
      {
        test: /\.html  \)/,
        use: [
          {
            loader: 'html-loader',
            options: {  // [!code focus]
              // 配置 HTML 中资源引用的处理规则
              sources: { // [!code focus]
                list: [ // [!code focus]
                  { tag: 'img', attribute: 'src', type: 'src' }, // 处理 <img src>
                  { tag: 'a', attribute: 'href', type: 'src' }   // 处理 <a href> // [!code focus]
                ] // [!code focus]
              } // [!code focus]
            } // [!code focus]
          }
        ]
      },
      {
        test:/\.css$/i,
        // use:["style-loader","css-loader"],
         use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              // 重点：将 CSS 输出到对应入口的 css 目录
              outputPath: '[name]/css/'  
            }
          }
        ]
      },
     {
      test:/\.vue$/,
      use:[
        { loader:"vue-loader" }
      ]
    },
      // 处理 .js 文件
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: [
        {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      ]
    },
    {
     test:/\.(png|jpe?g|gif|svg|webp)$/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:'head',
      title:"index page ",
      template:"./index.html",
      filename:"index.html",
      chunks:['index'],
    }),
    new MiniCssExtractPlugin({
      // CSS 输出到对应入口的 css 目录
      filename: '[name]/css/[name].[contenthash:8].css'  
    }),
  ],
  // 优化配置（如代码拆分）
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 20000,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          reuseExistingChunk: true,
          name: 'vendors'
        }
      }
    }
  }
}