vue 腳手架初始化項目中配置文件webpack.base.conf.js代碼含義

'use strict'
//引入node.js路勁模塊
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是在其他規則執行之前執行 post是在其他規則執行之後執行
  enforce: 'pre',
  //進行檢測的文件目錄包括哪些 調用了路徑函數，
  include: [resolve('src'), resolve('test')],
  options: {
    //使用第三方的插件進行eslint 檢測
    formatter: require('eslint-friendly-formatter'),
    //是否輸出eslint報錯信息
    emitWarning: !config.dev.showEslintErrorsInOverlay
  }
})
//webpack的配置，可以理解成是開發環境和正式環境的一些公共配置
module.exports = {
  //webpack 解析時根目錄地址如果此文件在跟目錄這句話就不用寫
  context: path.resolve(__dirname, '../'),
  entry: {
    //入口文件是src目錄下的main.js
    app: './src/main.js'
  },
  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
  },
  resolve: {
     // resolve是webpack的內置選項，顧名思義，決定要做的事情，也就是說當使用 import "jquery"，該如何去執行這件事
    // 情就是resolve配置項要做的，import jQuery from "./additional/dist/js/jquery" 這樣會很麻煩，可以起個別名簡化操作
    extensions: ['.js', '.vue', '.json'],// 省略擴展名，也就是說.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'),
    }
  },
  // module用來解析不同的模塊
  module: {
    //轉換解析規則
        //1.test是用來解析所有此尾碼名的文件，
        //2.loader我們用什麼npm什麼形式的loader去解析
        //3.include是代表我們解析的文件只包含那些東西
        //4.options解析文件參數設置 具體看下麵的解釋
    rules: [
      ...(config.dev.useEslint ? [createLintingRule()] : []),
      {
        test: /\.vue$/,
        // 對vue文件使用vue-loader，該loader是vue單文件組件的實現核心，專門用來解析.vue文件的
        loader: 'vue-loader',
        // 將vueLoaderConfig當做參數傳遞給vue-loader,就可以解析文件中的css相關文件
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
         // 對js文件使用babel-loader轉碼,該插件是用來解析es6等代碼
        loader: 'babel-loader',
        // 指明src和test目錄下的js文件要使用該loader
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
          // 對圖片相關的文件使用 url-loader 插件，這個插件的作用是將一個足夠小的文件生成一個64位的DataURL
        // 可能有些老鐵還不知道 DataURL 是啥，當一個圖片足夠小，為了避免單獨請求可以把圖片的二進位代碼變成64位的
        // DataURL，使用src載入，也就是把圖片當成一串代碼，避免請求，神不神奇？？
        loader: 'url-loader',
        options: {
          // 限制 10000 個位元組一下的圖片才使用DataURL
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')// 這個函數執行結果是 /img/[name].[hash:7].[ext]
           // 不知道吧 name 設置成 /img/[name].[hash:7].[ext] 意欲何為，猜測應該是輸出圖片的路徑或者是解析圖片的路徑
        }
      },
      {
         //對一些音頻文件進行解析
        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: {
    // 是否 polyfill 或 mock
        // prevent webpack from injecting useless setImmediate polyfill because Vue
        // 源包含它（雖然僅在本地使用)
    // source contains it (although only uses it if it's native).
    setImmediate: false,
    // 預防webpack從註入模擬節點到node原生模塊
    // prevent webpack from injecting mocks to Node native modules
     // that does not make sense for the client 這對客戶端沒有影響
    // that does not make sense for the client
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  }
}