// 这个配置文件其实就是一个js文件通过node中的操作向外暴露了一个配置对象
const path=require('path')
// 只要是插件，都一定要放在plugin节点中去
// html-webpack-plugin插件的作用
// 1、自动在内存中根据指定页面生成一个内存的页面
// 2、自动把打包好的bundle.js文件追加到页面中去
const htmlWebpackPlugin=require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports={
    //需要在配置文件中指定入口出口 
    entry:path.join(__dirname, './src/main.js'),
    //入口，表示用webpack打包哪个文件
    output:{//输出文件相关的配置 
        path:path.join(__dirname, './dist'),
        filename:'bundle.js'
 
    },
    plugins:[
        new htmlWebpackPlugin({//创建一个在内存中生成htnl页面的插件
            template:path.join(__dirname, './src/index.html'),
            //指定模板页面，将来会根据指定的页面路径去生成内存中的页面
            filename:'index.html'//指定生成的页面的名称
        }),
        new VueLoaderPlugin()
    ],
    module:{//这个节点用于配置所有第三方模块加载器
        rules:[//所有加载器匹配规则
            {test:/\.css$/, use:['style-loader', 'css-loader']},
            {test:/\.scss$/, use:['style-loader', 'css-loader', 'sass-loader']},
            {test:/\.less$/, use:['style-loader', 'css-loader', 'less-loader']},
            //配置处理.css文件的第三方loader规则，css-loader需要写在style-loader的后面
            {test:/\.vue$/, use:'vue-loader'},
            //处理vue文件的
            {test: /\.(ttf|eot|svg|woff|woff2)$/, use:'url-loader'},
            // 处理字体文件
            {test:/\.js$/ , use:'babel-loader', exclude:/node_modules/},
            //处理其他js文件
            { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' }, // 处理 图片路径的 loader
      // limit 给定的值，是图片的大小，单位是 byte， 如果我们引用的 图片，大于或等于给定的 limit值，则不会被转为base64格式的字符串， 如果 图片小于给定的 limit 值，则会被转为 base64的字符串
        ]

    },
    resolve: {
        alias: {
            /*"vue$": "vue/dist/vue.js"*/
        }
    }
    // devServer2:{
    //     // --open --port 3000 --contentBase src
    //     open:true,//自动打开浏览器
    //     port:3000,//设置启动时候的运行端口
    //     contentBase:'src',//指定托管的根目录
    //     hot:true//启动热更新 的第一步
    // }
}