// const path = require('path')
// //这个配置文件就是一个js文件，通过node中的模块操作，向外暴漏一个配置对象
// module.exports = {
// 	entry:path.join(__dirname,'./src/main.js')//入口表示要使用webpack打包那个文件
// 	output:{//输出文件相关配置
// 		path:path.join(__dirname,'./dist')//指定打包好的文件，输出到那个目录中去
// 		filename:'bundle.js'//指定输出文件的名称
// 	}
// } 

var path = require('path');
const webpack = require('webpack')
const htmlWebpackPlugin = require('html-webpack-plugin')
 
module.exports = {
  mode: 'development',
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js'
  },
  plugins: [ // 配置插件的节点
    new webpack.HotModuleReplacementPlugin(), // new 一个热更新的 模块对象， 这是 启用热更新的第 3 步
    new htmlWebpackPlugin({ // 创建一个 在内存中 生成 HTML  页面的插件
      template: path.join(__dirname, './src/index.html'), // 指定 模板页面，将来会根据指定的页面路径，去生成内存中的 页面
      filename: 'index.html' // 指定生成的页面的名称
    })
  ],
  module: { // 这个节点，用于配置 所有 第三方模块 加载器 
    rules: [ // 所有第三方模块的 匹配规则
      { test: /\.css$/, use: ['style-loader', 'css-loader'] }, //  配置处理 .css 文件的第三方loader 规则
      // { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, //配置处理 .less 文件的第三方 loader 规则
      // { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 配置处理 .scss 文件的 第三方 loader 规则
      {test: /\.(jpg|png|jpeg|gif|bmp)$/,use:'url-loader?limit=7243&name=[hash:8]-[name].[ext]'}//处理图片路径的loader ,limit设置图片小于多少字节的时候是编译成base64,[name].[ext]是设置图片名称是否保持不变的[ext]是设置格式的,[hash:8]-加这个的目的是防止webpack打包的时候把相同名字的照片变成一个
      ,{test: /\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},
      //转化高级的js语言
      {test: /\.js$/,use:'babel-loader',exclude:/node_modules/},
      { test: /\.vue$/, use: 'vue-loader' }
    ]
  },
  resolve:{
    alias:{//修改vue被导入时包的路径
      // "vue$":"vue/dist/vue.js"
    }
  }
};