const path = require('path');

//这个插件的两个作用
const htmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {

  entry: path.join(__dirname,'./src/main.js'),
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist')
  },
  mode: 'development',

  plugins:[
    new htmlWebpackPlugin({
        //在内存里生成首页HTML的插件
        template: path.join(__dirname,'./src/index.html'),//指定的模板页面
        filename: 'index.html'    //指定生成的页面的名称 
    })
  ],

  module:{//这个节点用于配置所有第三方的加载器
    rules:[//匹配规则 
        { test:/\.css$/, use:['style-loader', 'css-loader'] },//配置css的加载器
        { test:/\.less$/, use:['vue-style-loader', 'css-loader', 'less-loader'] },//配置less
        { test:/\.scss$/, use:['style-loader', 'css-loader', 'sass-loader'] },//配置scss
        { test:/\.(jpg|jpeg|png|gif|bmp)$/, use:['url-loader?limit=214&name=[hash:8]-[name].[ext]'] },
        { test:/\.(ttf|eot|svg|woff|woff2)$/, use:'url-loader' },
        { test:/\.js$/, use:'babel-loader', exclude:/node_modules/ },
        {
          test: /\.vue$/,
          use: 'vue-loader'
        }
    ]
        
  }
  
};