<template>
	<div class="beva-loading">
		<img class="loading-icon" :src="imgSrc" alt="">
	</div>
</template>
<script>
	export default {
  name: 'Loading',
  props: {
    imgSrc: {
      type: String,
      default: ''
    },
  },
  data() {
		return {}
	}
}
</script>

import Loading from './src/Loading.vue'
 
Loading.install = function (Vue) { 
  Vue.component(Loading.name, Loading)
}
export default Loading

	.beva-loading {
	  background-color: rgba(0, 0, 0, 0.7);
	  border-radius: 0.4rem;
	  color: #ffffff;
	  position: fixed;
	  z-index: 99;
	  width: 7.46rem;
	  height: auto;
	  padding: 0.8rem;
	  text-align: center;
	  top: 20vh;
	  box-sizing: border-box;
	  margin-left: -3.73rem;
	  left: 50%;
	}
	.loading-icon {
	  width: 4rem;
	  height: 4rem;
	  animation: rotatingright 1s linear infinite;
    }
	/*自定義動畫類----順時針旋轉（使用這個動畫的時候才設置動畫執(zhí)行時間）*/
	@keyframes rotatingright {
	  transform-origin: 50% 50%;
	  0% {
	    transform: rotate(0deg);
	  }
	  50% {
	    transform: rotate(180deg);
	  }
	  100% {
	    transform: rotate(360deg);
	  }
	}
 
	/*自定義動畫類----逆時針旋轉（使用這個動畫的時候才設置動畫執(zhí)行時間）*/
	@-webkit-keyframes rotatingleft {
	  0% {
	    -webkit-transform: rotate(0deg);
	  }
	  50% {
	    -webkit-transform: rotate(-180deg);
	  }
 
	  100% {
	    -webkit-transform: rotate(-360deg);
	  }
	}

// 將組件庫中定義的所有組件引進來，然后再導出
import Demo from './demo';
import Card from './card';
import Loading from './Loading';
 
const components = {
  Demo,
  Card,
  Loading
}
const install = function (Vue) { 
  // 判斷是否安裝，安裝過就不繼續(xù)往下執(zhí)行
  if (install.installed) return
  Object.keys(components).forEach(component => { 
    Vue.component(components[component].name, components[component])
  })
}
export default {
  install
}

const { VueLoaderPlugin } = require('vue-loader');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const glob = require('glob')
const path = require('path')
const list = {}// 動態(tài)導入多個組件的入口文件
// 封裝組件的一些配置，因為組件打包是單獨打包的，所以需要單獨配置
async function makeList (dirPath, list) {
  // 拿到所有的入口文件的路徑
  const files = await glob.sync(`${dirPath}/**/index.js`)//[ 'components/lib/button/index.js', 'components/lib/icon/index.js']
  // 取出上一級目錄的文件名
  files.forEach(file => {
    let name = file.split('/')[2]
    // 判斷name是否有后綴名，有的話去除
    if (name.includes('.')) {
      name = name.split('.')[0]
    }
    list[name] = `./${file}`
  })
  // console.log(list)
}
makeList('components/lib', list)
module.exports = {
  entry: list,
  mode:'development',
  output: {
    filename: '[name].umd.js',// webpack打包的時候會將name替換成入口的name名字，例如card.umd.js
    path: path.resolve(__dirname, 'dist'),
    library:'mui',
    libraryTarget: 'umd',// 指定輸出格式，umd是一種模塊，兼容了CommonJS、AMD、CMD
  },
  plugins: [
    new VueLoaderPlugin(),
    new CleanWebpackPlugin()
  ],
  module: {
    // 配置rules，即什么樣的文件，使用什么樣的loader
    rules: [
      {
        test: /\.vue$/,
        use: [
          {
            loader: 'vue-loader',
          }
        ]
      },
      {
        test: /\.css$/,
        use: ['style-loader','css-loader']
      },// 這里只處理了css，而項目中組件中使用了scss文件，對于scss文件的處理這里使用的是gulp，下面會提到
      {
        test: /\.(png|jpg|gif|svg)$/i, // 匹配圖片文件格式
        type: 'asset/resource', // 使用內置的asset模塊處理資源文件
        generator: {
          filename: 'images/[name][ext]', // 輸出的文件名格式
        },
      },
    ],
  },
}
  

const gulp = require('gulp');
// 需要把樣式代碼導入
const sass = require('gulp-sass')(require('sass'));
// 對css代碼進行壓縮
const minifyCSS = require('gulp-minify-css');
gulp.task('sass', async function () {
  return gulp.src('components/css/**/*.scss')
    .pipe(sass())// 將scss代碼轉換成css代碼
    .pipe(minifyCSS())// 壓縮css代碼
    .pipe(gulp.dest('dist/css'))// 輸出到打包目錄
})