// webpack.base.conf.js
"use strict";

const path = require("path");
const config = require("../config");

/**
 * 
 * @method resolve
 * @param  {String} dir 
 * @return {String}     
 */
function resolve(dir) {
    return path.join(__dirname, "..", dir)
}

// eslint 
const createESlintRules = () => ({
    test: /\.(js|vue)$/,
    loader: "eslint-loader",
    enfore: "pre",
    include: [resolve("src"), resolve("test")],
    options: {
        formatter: require("eslint-friendly-formatter"), // // 
        // emitWarning: !config.dev.showEslintErrorsInOverlay
    }
})

module.exports = {
    context: path.resolve(__dirname, "../"), // 
    entry: {
        app: "./src/main.js"
    },
    output: {
        path: config.build.assetsRoot,
        filename: "[name]".js
    },
    resolve: {
        extensioins: [".js", ".vue", ".json"],
        alias: {
            "vue$": "vue/dist/vue.esm.js",
            "@": resolve("src"),
        }
    },
    module: {
        rules: [
            // eslint
            ...(config.dev.useEslint ? [createLintingRule()] : []),
            {
                test: /\.vue$/,
                loader: "vue-loader",
                options: {}
            },
            {
                test: /\.js$/,
                loader: "babel-loader",
                include: [resolve("src"), resolve("test"), resolve("node_modules/webpack-dev-server/client")]
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)/,
                loader: "url-loader",
                options: {
                    limit: 10000,
                    name: "img/[name].[hash:7].[ext]"
                }
            },
            {
                test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
                loader: "url-loader",
                options: {
                    limit: 10000,
                    name: "media/[name].[hash:7].[ext]"
                }
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: "url-loader",
                options: {
                    limit: 10000,
                    name: "fonts/[name].[hash:7].[ext]"
                }
            }
        ]
    }
}

// webpack.dev.conf.js
"use strict";

// 

const path = require("path");
const webpack = require("webpack");
const config = require("../config"); // 
const merge = require("webpack-merge");
const baseWebpackConfig = require("./webpack.base.conf");
const HtmlWebpackPlugin = require("html-webpack-plugin");
// process()
const HOST = process.env.HOST
const PORT = process.env.PROT && Number(process.env.PROT)


const devWebpackConfig = merge(baseWebpackConfig, {
    //  style-loader
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    {
                        loader: "css-loader",
                        options: {
                            importLoaders: 1
                        }
                    },
                    "postcss-loader"
                ]
            },
            {
                test: /\.less$/,
                use: [
                    {
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader",
                        options: {
                            importLoaders: 1
                        }
                    },
                    "postcss-loader",
                    {
                        loader: "less-loader"
                    }
                ]
            },
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader",
                        options: {
                            importLoaders: 1
                        }
                    },
                    {
                        loader: "postcss-loader"
                    },
                    {
                        loader: "sass-loader"
                    }
                ]
            },
            {
                test: /\.styl$/,
                use: [
                    "style-loader",
                    {
                        loader: "css-loader",
                        options: {
                            importLoaders: 1
                        }
                    },
                    "postcss-loader",
                    "stylus-loader"
                ]
            },
        ]
    },
    devtool: config.dev.devtool,
    devServer: {
        contentBase: path.join(__dirname, "../dist"),
        clientLogLevel: "warning", // (DevTools)
        historyApiFallback: { // h5history API 404  index.html
            rewrites: [
                { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, "index.html") },
            ],
        },
        hot: true, // 
        compress: true, // gzip
        host: HOST || config.dev.host, // localhost
        port: PORT || config.dev.port, // 
        open: config.dev.autoOpenBrowser, // 
        overlay: config.dev.errorOverlay //  ,
            ? { warnings: false, errors: true }
            : false,
        publicPath: config.dev.assetsPublicPath,
        //  http://localhost:8080 output.filename bundle.js
        // publicPath"/" http://localhost:8080/bundle.js 
        // configindex.js devassertsPublicPath"/asserts/"
        //  http://localhost:8080/asserts/
        proxy: config.dev.proxyTable,
        //  APIAPI
        //  URL.API,   http-proxy-middleware
        quiet: true,
        // quiet
        // WebPack
        watchOptions: {
            poll: config.dev.poll,
        }
    },
    plugins: [
        new webpack.DefinePlugin({
            "process.env": require("../config/dev.env.js")
        }),
        new webpack.HotModuleReplacementPlugin(), //,
        new webpack.NamedModulesPlugin(),        // 
        new webpack.NoEmitOnErrorsPlugin(),     //  
        new HtmlWebpackPlugin({                //  html
            filename: "index.html",
            template: "index.html",
            inject: true
        })
    ]
})

// config/index.js

"use strict";
const path = require("path");

module.exports = {
    // 
    dev: {
        assetsPublicPath: "/",
        assetsSubDirectory: "static",
        useEslint: false,
        proxyTable: {},         // : proxy: [{context: ["/auth", "/api"],target: "http://localhost:3000",}]
        host: "localhost",      // process.env.HOST
        port: 8080,             // process.env.PORT  
        autoOpenBrowser: false, // 
        errorOverlay: true,     // 
        notifyOnErrors: true,   // 
        poll: false,            // https://webpack.js.org/configuration/dev-server/-sharpdevserver-watchoptions-
        devtool: "cheap-module-eval-source-map", 
        cssSourceMap: true      //  cssSourceMap
    },
    // 
    build: {
        assetsRoot: path.resolve(__dirname, "../dist"),
    }
}

ask God for help, thank you very much!