解讀vue的webpack.base.conf.js配置

'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'
  }
}