const path = require('path')

const htmlWebPackPlugin = require('html-webpack-plugin')

// 注意 安装 vue-loader 之后 需要导入包  并且需要在 plugins 下面配置
const  {VueLoaderPlugin}  = require('vue-loader')

module.exports = {
  mode: 'development',
  entry: path.join(__dirname, './src/main.js'), // 入口文件
  output: {
    path: path.join(__dirname, './dist'), // 输出路径
    filename: 'bundle.js' // 指定输出文件的名称
  },
  plugins: [ // 插件的配置节点
    new htmlWebPackPlugin ({
      template: path.join(__dirname, './src/index.html'), // 指定模板文件路径
      filename: 'index.html' // 设置生成的内存页面名称
    }),
    new VueLoaderPlugin()
  ],
  module: { // 配置loader 模块
    rules: [
      {test: /\.css$/, use: ['style-loader', 'css-loader']}, //处理css文件 loader
      {test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']}, //处理sass文件 loader
      {test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=13814&[hash:8]-name=[name].[ext]'}, //处理图片路径的loader
      // limit 给定的值，是图片的大小，单位是 byte， 如果我们引用的 图片，大于或等于给定的 limit值，则不会被转为base64格式的字符串， 如果 图片小于给定的 limit 值，则会被转为 base64的字符串
      { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 处理 字体文件的 loader 

      { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, //这是配置babel来转换高级的es语法
      { test: /\.vue$/, use: 'vue-loader'}
    ]
  },
  resolve: {
    alias: { // 设置 vue 被导入包的时候的路径
      // "vue$": "vue/dist/vue.js"
    }
  }
 

}