/*
 * @Author: 小明丶
 * @Date: 2019-08-19 15:23:18
 * @LastEditors: 小明丶
 * @LastEditTime: 2021-01-07 10:34:13
 * @Description:
 */
//  webpack通用配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const vuxLoader = require('vux-loader');
let env = process.env.NODE_ENV;

//打包地址
let srcUrl = '/sib_wx_scorec/'
module.exports = {
    entry: {
        index: "./src/index.js",
    },
    output: {
        filename: 'js/[name].js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: env ? '/sib_wx_scorec/' : '/' //根据线上项目路径更改 /projectpath
    },
    /**防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖，
     * 简而言之：就是使用cdn~不打包这些变量引用的文件，生成环境时需要在index.html中手动引入cdn
     */
    externals: {
        vue: "Vue",
        axios: "axios",
        vuex: "Vuex",
        router: "VueRouter",
    },
    resolve: {
        extensions: ['.vue', '.js', '.less'],
        alias: { //别名配置
            "@": path.resolve(__dirname, 'src')
        }
    },
    module: {
        rules: [{
                test: /\.(svg|ttf|eot|woff)\??.*$/,
                loader: "url-loader?limit=10000"
            },
            {
                test: /\.css$/,
                use: [
                    env ? MiniCssExtractPlugin.loader : "vue-style-loader",
                    'css-loader',
                    "postcss-loader",
                ],
            },
            {
                test: /\.less$/,
                use: [
                    env ? MiniCssExtractPlugin.loader : "vue-style-loader",
                    'css-loader',
                    "postcss-loader", //posscss-loader顺序一定要在less-loader前面~不然无法解析
                    'less-loader',
                    // 全局注入less变量，在所有vue组件中可使用
                    // 不能写不接受变量的死类名在这些文件里，不然每个vue文件都会注入这些css类，打包后增加css体积！
                    {
                        loader: 'style-resources-loader',
                        options: {
                            patterns: [
                                path.resolve(__dirname, 'src/style/mixins.less'),
                            ]
                        }
                    }
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)/, //处理图片
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 100000,
                        outputPath: 'img/',
                        publicPath: `${srcUrl}img`
                        //publicPath: `/img`
                    }
                }]
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        // @vue/babel-preset-jsx  vue jsx语法支持
                        presets: ['@babel/preset-env', '@vue/babel-preset-jsx'],
                        plugins: ["dynamic-import-webpack"] //import 函数支持，需要安装
                    }
                }
            },
        ]
    },
    plugins: [
        // 静态目录
        new CopyPlugin([{
            from: path.resolve(__dirname, 'static'),
            to: 'static',
        }, ]),
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            template: './public/index.html', //以这个文件作为模板
            filename: 'index.html', //打包后的文件名
            title: 'Vue_webpack',
            hash: true,
            minify: {
                removeComments: true, //移除注释
                collapseWhitespace: true,
                removeEmptyAttributes: true, //移除空属性
                removeAttributeQuotes: true //移除属性html标签属性的引号 ""
            },
        }),
    ],
}


// module.exports = vuxLoader.merge(webpackConfig, {
//     plugins: [{
//         name: 'vux-ui'
//     }]
//     }
// );