// 默认下载的vue-loader 版本太高，需要降到14.1.1版本的
// 默认下载的 vue 模块 版本太高，需要降到 2.7.14

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 抽离css
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// 压缩css文件
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
module.exports = {
    // 文件解析
    resolve: {
         // 【配置省略后缀名】配置解析-文件名
        //  使用场景：配置后，在js中引入文件，可以不写后缀名
        // 官网地址 ：https://www.webpackjs.com/configuration/resolve/#resolveextensions
        extensions: ['.js', '.json', ".css",'.wasm'],
        // 【配置别名】配置引入文件的别名，
        // 使用场景：在引入文件路径时，可以不写相对路径，直接用@+文件名称，比如 import @/main.css
        // 【官网地址】https://www.webpackjs.com/configuration/resolve/#resolvealias
            alias: {
              "@": path.resolve(__dirname, 'src'),
            },
      },
    entry: './src/main.js', // 打包入口文件
    output: { // 打包出口配置
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
    },
    // 配置插件
    plugins: [
        new HtmlWebpackPlugin({
            //   title: '管理输出',
            template: "./index.html"
        }),
        new MiniCssExtractPlugin()
    ],
    optimization: {
        minimizer: [
            // 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`），将下一行取消注释
            // `...`,
            new CssMinimizerPlugin(),
        ],
        minimize: true,
    },
    //  配置前端服务 
    devServer: {
        // 需要配置服务端口,地址，是否热更新
        static: './dist',
        // host :"127.0.0.1" 
        host: '127.0.0.1',// 配置地址
        port: '9090',
        hot: true,
        // 配置 proxy 代理
        proxy: {
            // 当前端发送http请求，接口地址包含/bawei 指向的地址是 https://fc-mp-c3490805-9d7b-4acf-985b-19f987e0fd97.next.bspapp.com
            // 以下代理，请求接口会在api自动加上 /bawei 前缀
            // "/bawei":"https://fc-mp-c3490805-9d7b-4acf-985b-19f987e0fd97.next.bspapp.com"
            // 不希望传递代理前缀，通过配置替换
            // "/get_goods_list_bawei":{
            //     target:"https://fc-mp-c3490805-9d7b-4acf-985b-19f987e0fd97.next.bspapp.com/",
            //     pathRewrite: { '^/bawei': '' },
            // },
            // 开启代理前提，接口已开启跨越配置
            "/api": "127.0.0.1"
        },
        // 在wbepack 中起一个中间件服务
        // 官网地址 https://www.webpackjs.com/configuration/dev-server/#devserversetupmiddlewares
        setupMiddlewares: (middlewares, devServer) => {
            if (!devServer) {
                throw new Error('webpack-dev-server is not defined');
            }
            // 定义一个接口为 get_bawei 的 GET接口
            devServer.app.get('/get_bawei', (_, response) => {
                response.send({
                    title: " hi - 八维"
                });
            });
            return middlewares;
        },
    },
    //   配置 打包相关的loader
    mode: 'development',
    // 配置解析器 
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            // 它会应用到普通的 `.js` 文件
            // 以及 `.vue` 文件中的 `<script>` 块
            {
                test: /\.js$/,
                loader: 'babel-loader'
            },
            // 它会应用到普通的 `.css` 文件
            // 以及 `.vue` 文件中的 `<style>` 块
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    // 'vue-style-loader',
                    'css-loader'
                ]
            },
            // 配置打包图片
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: 'asset/resource',
              },
        ]
    },
};

  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },