const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 抽离css，不插入到head标签里
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); // 压缩css
const TerserJSPlugin = require('terser-webpack-plugin')
const webpack = require('webpack');

const htmlPlugin = new HtmlWebpackPlugin({
    template: './src/index.html',
    filename: 'index.html',
    hash: true,
    minify: {
        removeAttributeQuotes: true,
        collapseWhitespace: true
    },
    chunks: ['index']
});

const aboutPlugin = new HtmlWebpackPlugin({
    template: './src/about.html',
    filename: 'about.html',
    hash: true,
    minify: {
        removeAttributeQuotes: true,
        collapseWhitespace: true
    },
    chunks: ['about']
});
/* const htmlPlugin = ['index', 'about'].map(chunkName => {
   return new HtmlWebpackPlugin({
        template: `./src/${chunkName}.html`,
        filename: `${chunkName}.html`,
        hash: true,
        chunks: [`./src/${chunkName}`],
        minify: {
            removeAttributeQuotes: true,
            collapseWhitespace: true
        }
    });
}) */



const miniPlugin = new MiniCssExtractPlugin({
    filename: 'main.css'
});
// 每个模块中注入jq
const webpackProvidePlugin = new webpack.ProvidePlugin({
    $: 'jquery',
})

module.exports = {
    optimization: {
        minimize: true, // 开启压缩，默认false
        minimizer: [
            new TerserJSPlugin({
                terserOptions: {
                    output: {
                        comments: false // 删除js文件中的注释
                    }
                },
                extractComments: false, // 不将注释提取到单独的文件
                sourceMap: true // 源码映射
            }),
            new OptimizeCSSAssetsPlugin()
        ]
    },
    devServer: {
        // port: 3000,
        // progress: true,
        contentBase: path.resolve(__dirname, './build'),
        open: true,
        host: process.env.HOST || '192.168.1.66',
        port: 3000
    },
    mode: 'development', // development production
    entry: {
        index: './src/index.js',
        about: './src/about.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },

    plugins: [
        miniPlugin,
        htmlPlugin,
        aboutPlugin,
        webpackProvidePlugin
    ],
    module: {
        rules: [{
                test: /\.(html)$/, // html文件中img标签src没有被打包的问题
                use: {
                    loader: 'html-loader',
                    options: {
                        attrs: ['img:src', 'img:data-src', 'audio:src'],
                        // minimize: true
                    }
                }
            },
            {
                test: /\.(png|jpg)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 1,
                        esModule: false,
                        outputPath: 'img/'
                    }

                }]
            },
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            '@babel/preset-env'
                        ]
                    }
                },
                include: path.resolve(__dirname, 'src'),
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'less-loader',
                    'postcss-loader',
                ]
            }
        ]
    }
}