const path = require('path');
//webpack打包成功后预览页面插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
const htmlPlugin = new HtmlWebpackPlugin({
    //设置打包成功后预览页面的模板
    template: './public/index.html',
    //打包成功后，打包过后的文件会自动注入到模板文件中，设置最终生成的预览页面文件名
    filename: 'index.html'
});
//vue-loader插件
const { VueLoaderPlugin } = require('vue-loader');
// 清理dist目录插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
    //development：开发模式，production：生产(上线)模式
    mode: 'development',

    //打包入口
    entry: {
        // 列举要打包的文件
        app: './src/main.js',
        // 其他文件...
    },

    //打包出口
    output: {
        //设置打包后的文件名称
        filename: 'js/[name].bundle.js',
        //打包后的文件所在目录，对于webpack命令有效；
        //而对于webpack-dev-server命令无效，其打包后存储在开发服务器内存根目录下('/')，所以我们无法查看
        path: path.join(__dirname, './dist')
    },
    // 配置插件
    plugins: [htmlPlugin, new VueLoaderPlugin(), new CleanWebpackPlugin()],
    devServer: {
        //设置devServer开发服务器静态资源目录
        //默认为项目的根目录(与package.json同路径)
        contentBase: path.join(__dirname, './')
    },
    //模块加载器配置
    module: {
        //配置规则
        rules: [{
                //加载css文件
                test: /\.css$/,
                //加载器从右往左处理
                use: ['style-loader', 'css-loader', 'postcss-loader'] //postcss-loader自动添加前缀
            }, {
                // 加载less文件
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader'] //less-loader依赖less核心包
            }, {
                // 加载scss文件
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader'] //sass-loader依赖node-sass核心包
            },
            {
                // 加载字体/图片文件
                test: /\.(jpg|png|gif|bmp|eot|svg|woff|woff2)$/,
                // use: ['url-loader?limit=16940&name=images/[name].[ext]&esModule=false'] //url-loader依赖file-loader核心包，图片小于16940字节，会转化成base64格式，超过则不会转化
                // 或者
                loader: 'url-loader',
                options: {
                    limit: 16940, //文件大小小于这个值，转为base64格式，超过保持原有格式
                    name: 'images/[name].[ext]', //文件大小超过限制时的存储路径，以及文件命名格式
                    esModule: false //src路径默认会解析成[object Module]，因此设置不解析成Module
                }
            },
            {
                // 加载音频文件
                test: /\.(mp3)(\?.*)?$/,
                use: ['file-loader?name=audio/[name].[ext]&esModule=false']
            },
            //加载高级js语法文件配置
            {
                test: /\.js$/,
                use: ['babel-loader'],
                // 只加载src目录下的js文件
                include: path.join(__dirname, 'src'),
                //或者排除node_modules文件夹
                // exclude: [/node_modules/] 
            },
            //加载vue单文件组件配置
            {
                test: /\.vue$/,
                use: ['vue-loader']
            }
        ]
    },
    // 配置devServer开发服务器
    devServer: {
        open: true,
        host: 'localhost',
        port: 3004
    }
};