'use strict'
// 引入nodejs路徑模組
const path = require('path') 

// 引入utils工具模組，utils主要用來處理css-loader和vue-style-loader的
const utils = require('./utils')

// 引入config目錄下的index.js配置檔案，主要用來定義一些開發和生產環境的屬性
const config = require('../config')

// vue-loader.conf配置檔案是用來解決各種css檔案的，定義了諸如css,less,sass之類的和樣式有關的loader
const vueLoaderConfig = require('./vue-loader.conf')

 
// 此函式是用來返回當前目錄的平行目錄的路徑，因為有個'..'
function resolve (dir) {  
  return path.join(__dirname, '..', dir)
}

const createLintingRule = () => ({
  test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  include: [resolve('src'), resolve('test')],
  options: {
    formatter: require('eslint-friendly-formatter'),
    emitWarning: 
 
!config.dev.showEslintErrorsInOverlay
  }
})

module.exports = {
  externals: {
      "echarts": "echarts"
  },
  context: path.resolve(__dirname, '../'),
  entry: {
    // 入口檔案是src目錄下的main.js 通過 babel-polyfill 轉義es6
    app: ["babel-polyfill", "./src/main.js"]
  },
  output: {
    // 輸出路徑是config目錄下的index.js中的build配置中的assetsRoot，"/dist"
 

    path: config.build.assetsRoot,

    // 檔名稱這裡使用預設的name也就是main
    filename: '[name].js',

    // webpack編譯輸出的釋出路徑，也就是真正的檔案引用路徑，其實這裡都是 '/'
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {  // resolve是用來對模組進行解析，就是所謂的libary第三方庫
    extensions: ['.js', '.vue', '.json'],  // .extensions 是對模組的字尾進行解析
    // 比方說var config = require('../config') webpack.base裡引入了config模組的時候，沒有帶js字尾，那檔案會不會識別，本質上不會識別，但是有了這個配置，
    // 會先進.js字尾進行匹配，沒有再匹配.vue，沒有再匹配.json，還是沒有找到的話,則會報錯，檔案沒有找到no find

    alias: {  // 配置別名
      'vue$': 'vue/dist/vue.esm.js',
      
      '@': resolve('src'),
      // 用@來代替src目錄的絕對路徑，此時就用到了上面function resolve封裝的函式，此時就絕對路徑就定位到了src目錄，因為我們所有檔案都放在src目錄下，我們就可以通過src目錄直接定位到你想要找的檔案
    }
  },

  // module用來解析不同的模組
  module: {
    rules: [
      {
        test: /\.vue$/,   // 對vue檔案使用vue-loader，該loader是vue單檔案元件的實現核心，專門用來解析.vue檔案的
        loader: 'vue-loader',   // loader我們用什麼npm什麼形式的loader去解析
        options: vueLoaderConfig   // 將vueLoaderConfig當做引數傳遞給vue-loader,就可以解析檔案中的css相關檔案
      },
      {
        test: /\.js$/,   // 對js檔案使用babel-loader轉碼,該外掛是用來解析es6等程式碼
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]   // 指明src和test目錄下的js檔案要使用該loader  考慮效能問題，打包時間問題，我們不考慮解析node-module裡的檔案
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,  // 對圖片相關的檔案使用 url-loader 外掛，這個外掛的作用是將一個足夠小的檔案生成一個64位的DataURL
        loader: 'url-loader',
        options: {
          limit: 10000,  // 對於檔案小於10K的，在生成的程式碼用中base64來替代
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
          // 例： dev開發的時候用../../aa/aa.jpg
          // 最後輸出：/static/img/aa42432432423.jpg 就是publicpath+/static/圖片名+hash+圖片字尾來進行返回
          // 輸出圖片的路徑或者是解析圖片的路徑
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, // 多媒體檔案處理
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,  // 字型檔案處理
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },
  node: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native).
    setImmediate: false,
    // prevent webpack from injecting mocks to Node native modules
    // that does not make sense for the client
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  }
}