const path = require('path');

//引入插件使用
const MiniCssExtractPlugin = require('mini-css-extract-plugin');  //提取css
const HtmlWebpackPlugin = require("html-webpack-plugin");  //创建html
const { CleanWebpackPlugin } = require('clean-webpack-plugin');  //清楚旧文件

module.exports = {
    entry: './src/index.js',					// 项目入口
    output: {
        filename: 'bundle.js',                  // 默认打包后的文件名 bundle.js
        path: path.resolve(__dirname, 'dist'),   // 默认打包后的文件目录 dist
    },
    module: {
        rules:[
            {
                test:/\.css$/,
                use:[
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
            // 这里上面有其他配置, 比如 css 之类...
            // 添加一个新的, 负责 less 文件
            {
                test: /\.less$/,		// 匹配less扩展名文件
                use:[				
                    MiniCssExtractPlugin.loader,		// 把less代码写入到网页中
                    'css-loader',		// 读取less的代码
                    'less-loader'		// 解释编译less代码
                ]	
            },
            {
                test:/\.(png|svg|jpg|gif)$/,
                use:[
                    {
                        loader: "file-loader",              // 处理图片文件返回链接
                        options: {
                            publicPath: "./images/",   		// 引入图片时会在路径前面加上该选项
                            outputPath: "images"            //  输出到dist下的images目录
                        }
                    }
                ]
            }
        ]
    },
    // 添加插件配置选项
    plugins: [
        // 插件使用2. plugins 属性当中,创建实例, 按需添加参数
        // 这个插件如果不放任何参数, 默认生成 main.css 文件
        // 如果想要修改文件名, 就可以给一个配置对象, 然后里面添加 filename 属性
        new MiniCssExtractPlugin(),
        // 调用清除打包目录插件
        new CleanWebpackPlugin(),
        //创建html
        new HtmlWebpackPlugin({
            template: "public/index.html"	// template指定默认html模板
        }),
    ]
};