const { defineConfig } = require('@vue/cli-service')
const IconPlugin = require('unplugin-icons/webpack')

module.exports = defineConfig({
    // 编译依赖包中的代码
    transpileDependencies: true,
    // Webpack 配置
    chainWebpack: config => {
        // 加载 Markdown 的配置到 Vue 中
        config.module
            .rule('md')
            .test(/\.md/)
            .use('vue-loader')
            .loader('vue-loader')
            .end()
            .use('vue-markdown-loader')
            .loader('vue-markdown-loader/lib/markdown-compiler')
            .options({ raw: true })
    },
    configureWebpack: {
        plugins: [
            // 自动下载图标配置
            IconPlugin({ compiler: 'vue3', autoInstall: true })
        ]
    },
    // CSS 配置
    css: {
        loaderOptions: {
            // SASS 配置
            sass: {
                // 全局引入样式文件
                additionalData: `@import "@/style/variable.scss";`
            }
        }
    },
    // 开发配置
    devServer: {
        host: '127.0.0.1',
        port: 18003,
        open: true
    }
})