admin_core/webpack.config.js

const path = require('path')
const webpack = require('webpack')
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  mode: 'production', // 明确指定生产模式
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'admin-framework.js',
    library: 'AdminFramework',
    libraryTarget: 'umd',
    libraryExport: 'default',
    globalObject: 'typeof self !== \'undefined\' ? self : this',
    clean: true // 构建前清理 dist 目录
  },
  externals: {
    vue: {
      commonjs: 'vue',
      commonjs2: 'vue',
      amd: 'vue',
      root: 'Vue'
    },
    'vue-router': {
      commonjs: 'vue-router',
      commonjs2: 'vue-router',
      amd: 'vue-router',
      root: 'VueRouter'
    },
    vuex: {
      commonjs: 'vuex',
      commonjs2: 'vuex',
      amd: 'vuex',
      root: 'Vuex'
    },
    'view-design': {
      commonjs: 'view-design',
      commonjs2: 'view-design',
      amd: 'view-design',
      root: 'iview'
    },
    axios: {
      commonjs: 'axios',
      commonjs2: 'axios',
      amd: 'axios',
      root: 'axios'
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'less-loader'
        ]
      },
      {
        // 图片文件：根据文件类型分类存放
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000, // 小于 10KB 转为 base64
          name: (resourcePath, resourceQuery) => {
            // 根据文件扩展名分类
            const ext = path.extname(resourcePath).toLowerCase()
            if (ext === '.svg') {
              return 'images/svg/[name].[hash:7][ext]'
            } else if (ext === '.png') {
              return 'images/png/[name].[hash:7][ext]'
            } else if (ext === '.jpg' || ext === '.jpeg') {
              return 'images/jpg/[name].[hash:7][ext]'
            } else if (ext === '.gif') {
              return 'images/gif/[name].[hash:7][ext]'
            }
            return 'images/[name].[hash:7][ext]'
          },
          esModule: false
        }
      },
      {
        // 字体文件：根据字体类型分类存放
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000, // 小于 10KB 转为 base64
          name: (resourcePath, resourceQuery) => {
            // 根据文件扩展名分类
            const ext = path.extname(resourcePath).toLowerCase()
            if (ext === '.woff' || ext === '.woff2') {
              return 'fonts/woff/[name].[hash:7][ext]'
            } else if (ext === '.ttf') {
              return 'fonts/ttf/[name].[hash:7][ext]'
            } else if (ext === '.eot') {
              return 'fonts/eot/[name].[hash:7][ext]'
            } else if (ext === '.otf') {
              return 'fonts/otf/[name].[hash:7][ext]'
            }
            return 'fonts/[name].[hash:7][ext]'
          },
          esModule: false
        }
      },
      {
        // 媒体文件：视频和音频
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: (resourcePath, resourceQuery) => {
            const ext = path.extname(resourcePath).toLowerCase()
            if (['.mp4', '.webm', '.ogg'].includes(ext)) {
              return 'media/video/[name].[hash:7][ext]'
            } else if (['.mp3', '.wav', '.flac', '.aac'].includes(ext)) {
              return 'media/audio/[name].[hash:7][ext]'
            }
            return 'media/[name].[hash:7][ext]'
          },
          esModule: false
        }
      },
      {
        // JSON 文件
        test: /\.json$/,
        type: 'asset/resource',
        generator: {
          filename: 'data/[name].[hash:7][ext]'
        }
      },
      {
        // 其他资源文件
        test: /\.(txt|xml|md)$/,
        type: 'asset/resource',
        generator: {
          filename: 'assets/[name].[hash:7][ext]'
        }
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new webpack.BannerPlugin({
      banner: () => {
        const now = new Date()
        const updateTime = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`
        return [
          '/*',
          ' * admin-framework v1.0.0',
          ' * 通用后台管理系统框架 - 包含系统功能、登录、路由管理、布局等',
          ' * ',
          ' * 作者: light',
          ' * 更新时间: ' + updateTime,
          ' * ',
          ' * Copyright (c) ' + now.getFullYear(),
          ' */'
        ].join('\n')
      },
      raw: true, // 使用原始字符串，不添加额外的注释符号
      entryOnly: true // 只在入口文件顶部添加
    })
  ],
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@component': path.resolve(__dirname, 'src/components'),
      '@utils': path.resolve(__dirname, 'src/utils'),
      '@api': path.resolve(__dirname, 'src/api'),
      '@config': path.resolve(__dirname, 'src/config'),
      '@assets': path.resolve(__dirname, 'src/assets'),
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  optimization: {
    minimize: true
  }
}