'use strict'
// 基礎配置檔案 webpack.base.conf.js
// 註釋參考 https://www.cnblogs.com/ye-hcj/p/7082620.html 和 https://yq.aliyun.com/articles/609824

// 引入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)
}

<!-- eslint的規則定義一下程式碼檢測的規則 -->
const createLintingRule = () => ({
  // 對.js和.vue結尾的檔案進行eslint檢查
  test: /\.(js|vue)$/,
  // 使用eslint-loader
  loader: 'eslint-loader',
  // enforce的值可能是pre和post。其中pre有點和
 
[email protected]中的preLoader配置含義相似。
  // post和v1中的postLoader配置含義相似。表示loader的呼叫時機
  // 這裡表示在呼叫其他loader之前需要先呼叫這個規則進行程式碼風格的檢查
  enforce: 'pre',
  // 需要進行eslint檢查的檔案的目錄存在的地方
  include: [resolve('src'), resolve('test')],
  // eslint-loader配置過程中需要指定的選項
  options: {
    // 檔案風格的檢查的格式化程式，這裡使用的是第三方的eslint-friendly-formatter
    formatter: require('eslint-friendly-formatter'),
    // 是否需要eslint輸出警告資訊
    emitWarning: !config.dev.showEslintErrorsInOverlay
  }
})

module.exports = {
  // 基礎上下文
  context: path.resolve(__dirname, '../'),
  // webpack的入口檔案
  entry: {
    app: './src/main.js'
  },
  // webpack的輸出檔案
  output: {
    // 路徑是config目錄下的index.js中的build配置中的assetsRoot，也就是dist目錄
    path: config.build.assetsRoot,
    // 檔名稱這裡使用預設的name也就是main
    filename: '[name].js',
    // 上線地址，也就是真正的檔案引用路徑，如果是production生產環境，其實這裡都是 '/'
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  /**
   * 當webpack試圖去載入模組的時候，它預設是查詢以 .js 結尾的檔案的，
   * 所以我們要在配置檔案中告訴webpack，
   * 遇到 .vue 結尾的也要去載入,還在在module中指定rules規則,使用vue-loader外掛來解析vue檔案，
   * 新增 resolve 配置項，如下：
   */
  resolve: {
    // 省略副檔名，也就是說.js,.vue,.json檔案匯入可以省略字尾名，這會覆蓋預設的配置，所以要省略副檔名在這裡一定要寫上
    extensions: ['.js', '.vue', '.json'],
    // 建立別名
    alias: {
      //後面的$符號指精確匹配，也就是說只能使用 import vuejs from "vue" 這樣的方式匯入vue.esm.js檔案，不能在後面跟上 vue/vue.js
      'vue$': 'vue/dist/vue.esm.js',
      // resolve('src') 其實在這裡就是專案根目錄中的src目錄，使用 import somejs from "@/some.js" 就可以匯入指定檔案，是不是很高大上
      '@': resolve('src'),
    }
  },
  // 不同型別模組的處理規則 就是用不同的loader處理不同的檔案
  module: {
    noParse: [/videojs-contrib-hls/],
    //引入jquery需要expose-loader外掛
    loaders: [
        { test: require.resolve("jquery"), loader: "expose-loader?$" }
    ],
    rules: [
      ...(config.dev.useEslint ? [createLintingRule()] : []),
      {
        // 對所有.vue檔案使用vue-loader進行編譯
        test: /\.vue$/,
        // 對vue檔案使用vue-loader，該loader是vue單檔案元件的實現核心，專門用來解析.vue檔案的
        loader: 'vue-loader',
        // 將vueLoaderConfig當做引數傳遞給vue-loader,就可以解析檔案中的css相關檔案
        options: vueLoaderConfig
      },
      {
        // 對src和test資料夾下的.js檔案使用babel-loader將es6+的程式碼轉成es5, webpack只能識別es5表示式的語法
        test: /\.js$/,
        loader: 'babel-loader',
        // 指明src和test目錄下的js檔案要使用該loader
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      {
        // 對圖片資原始檔使用url-loader
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          // 小於10K的圖片轉成base64編碼的dataURL字串寫到程式碼中
          limit: 10000,
          // 其他的圖片轉移到靜態資原始檔夾
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        // 對多媒體資原始檔使用url-loader
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        // 對圖片相關的檔案使用 url-loader 外掛，這個外掛的作用是將一個足夠小的檔案生成一個64位的DataURL
        // 可能有些老鐵還不知道 DataURL 是啥，當一個圖片足夠小，為了避免單獨請求可以把圖片的二進位制程式碼變成64位的
        // DataURL，使用src載入，也就是把圖片當成一串程式碼，避免請求，神不神奇？？
        loader: 'url-loader',
        options: {
          // 小於10K的資源轉成base64編碼的dataURL字串寫到程式碼中
          limit: 10000,
          // 其他的資源轉移到靜態資原始檔夾
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        // 對字型資原始檔使用url-loader
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          // hash:7 代表 7 位數的 hash
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },
  // 這些選項用於配置polyfill或mock某些node.js全域性變數和模組。
  // 這可以使最初為nodejs編寫的程式碼可以在瀏覽器端執行
  node: {
    //這個配置是一個物件，其中的每個屬性都是nodejs全域性變數或模組的名稱
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native).
    // false表示什麼都不提供。如果獲取此物件的程式碼，可能會因為獲取不到此物件而觸發ReferenceError錯誤
    setImmediate: false,
    // prevent webpack from injecting mocks to Node native modules
    // that does not make sense for the client
    // 設定成empty則表示提供一個空物件
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  }
}