import webpack, {DefinePlugin} from 'webpack';
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
import path from 'path';
import MiniCssExtractPlugin from "mini-css-extract-plugin";
import CleanWebpackPlugin from 'clean-webpack-plugin';
import HtmlWebpackPlugin from "html-webpack-plugin";
import config from "./config";
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

let pathsToClean = [
    'dist'
];
let cleanOptions = {
    root: __dirname,
    verbose: true,
    dry: false
};
let baseArr = [
    new DefinePlugin({//全局变量
        PRODUCTION: false
    }),
    new MiniCssExtractPlugin({
        // Options similar to the same options in webpackOptions.output
        // both options are optional
        filename: "css/[name].css",
        chunkFilename: "css/[id].css"
    }),//css分离
    new CleanWebpackPlugin(pathsToClean, cleanOptions),//清除历史版本
    new UglifyJsPlugin({test: /\.js($|\?)/i,parallel: false})

];
let htmls = function () {
    const title = require('./app/' + config.currentApp + '/title');
    let arr = [];
    for (let i in title) {
        arr.push(new HtmlWebpackPlugin({
            filename: i + '.html',
            template: './index.ejs',
            title: title[i],
            inject: true,
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true
            }
        }))
    }
    arr = arr.concat(baseArr);
    return arr
};

module.exports = {
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                sourceMap: true // set to true if you want JS source maps
            }),
            new OptimizeCSSAssetsPlugin({})
        ]
    },
    //项目入口js文件
    entry: [`./app/${config.currentApp}/index.js`],
    //项目输出目录
    output: {
        chunkFilename: 'routes/[name].[chunkhash:8].chunk.js',
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[chunkhash:8].js',
    },
    //插件
    plugins: htmls(),
    //加载器
    module: {
        rules: [
            {
                test: /\.js/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                    }
                ]
            },
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    MiniCssExtractPlugin.loader ,
                    'css-loader',
                    'postcss-loader',
                    'sass-loader',
                ],
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: "url-loader?limit=8192",
            },
            {test: /\.html$/, use: 'html-withimg-loader'},
            {test: /\.json$/, use: 'json-loader'}
        ]
    },
    devServer: {
        publicPath: config.routerPath[config.currentApp],
        port: 8080,
        disableHostCheck: true,
    },
    devtool: "source-map",
    //模块路径
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src')
        }
    }
};