const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const webpackPathConfig = require('./webpack.config.path');
const appConfig = require('./app.config');
const isProd = (process.env.NODE_ENV === 'prod');

let entry = {};
let plugins = [];
webpackPathConfig.viewPages.forEach(page => {
	entry[page.id] = page.entry;
    plugins.push(
        new HtmlWebpackPlugin({
            favicon: webpackPathConfig.faviconDir,
            filename: path.resolve(path.dirname(__dirname), `./dist/html/${page.id}.html`),
            template: page.template,
			chunks:[page.id],
			chunksSortMode: 'manual',
			versionPath: 'v12.1',
            minify: true
        })
    );	
});

if (isProd) {
	plugins.push(
		new MiniCssExtractPlugin({
            filename: 'css/' + (isProd ? '[name].[contenthash:8].min.css' : '[name].css'),
            chunkFilename: 'css/' + (isProd ? '[name].chunk.[contenthash:8].min.css' : '[name].chunk.css'),
        })
    );
}

let publicPath = isProd ? appConfig.prod.publicPath : appConfig.dev.publicPath;
module.exports = {
    entry: entry,
    output: {
        publicPath: publicPath,
        path: path.resolve(path.dirname(__dirname), './dist/'),
        filename: 'js/' + (isProd ? '[name].[chunkhash:8].min.js' : '[name].js'),
        chunkFilename: 'js/' + (isProd ? '[name].chunk.[chunkhash:8].min.js' : '[name].chunk.js'),
		 clean: true,
    },
    externals:{
    },
    module: {
		rules: [{
        	test: require.resolve("jquery"),
        	loader: "expose-loader",
        	options: {
          		exposes: [{
					globalName: '$',
           			override: true,
				},
         		{
				globalName: 'jQuery',
           		override: true,
          		}]
      		}
		},
        {
			test: /\.(html|htm)$/,
			use: ['html-withimg-loader']
		},
        {
			test: /\.(png|jpg|jpe?g|gif)$/,
            use: ['file-loader?limit=4096&esModule=false&name=[name]' + (isProd ? '.[hash:8]' : '') + '.[ext]&outputPath=img/&&publicPath=' + publicPath + '/img',  {
            loader: 'image-webpack-loader',
            	options: {
                    	   bypassOnDebug: true, // webpack@1.x
                           disable: true, // webpack@2.x and newer
                      mozjpeg: {
                        progressive: true,
                        quality: 65
                      },
                      // optipng.enabled: false will disable optipng
                      optipng: {
                        enabled: false,
                      },
                      pngquant: {
                        quality: [0.65, 0.90],
                        speed: 4
                      },
                      gifsicle: {
                        interlaced: false,
                      },
                      // the webp option will enable WEBP
                      webp: {
                        quality: 75
                      }
                    }
                  },
                ]

            },
            {
                test: /\.(webp)$/,
                use: ['file-loader?name=[name]' + (isProd ? '.[hash:8]' : '') + '.[ext]&outputPath=img/&publicPath=' + publicPath + 'img']
            },
            {
                test: /\.(svg|woff|woff2|ttf|eot)(\?.*$|$)/,
                use: ['file-loader?name=font/[name].[hash:8].[ext]&outputPath=font/&publicPath=' + publicPath + 'font']
            },
            {
                test: /\.(css)$/,
                use: [isProd ? ({
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '../'
                    }
                }) : 'style-loader', 'css-loader']
            },
            {
                test: /\.(scss)$/,
                use: [isProd ? ({
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '../'
                    }
                }) : 'style-loader', 'css-loader', {
                    loader: 'postcss-loader',
                    options: {
                        plugins: function () {
                            return [
                                require('autoprefixer')
                            ];
                        }
                    }
                }, 'sass-loader']
            },
            {
                enforce: 'pre',
                test: /\.js$/,
                include: [path.resolve(__dirname, '../src/views'), path.resolve(__dirname, '../src/app')], // 指定eslint检查的目录
                loader: 'eslint-loader',
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-env", "@babel/preset-react"],
                        plugins: ["@babel/plugin-transform-runtime"]
                    }
                }
            }
        ]
    },
    plugins: [
        ...plugins
    ],
};