vue --- 解讀vue的中webpack.base.config.js

const path = require('path')
const utils = require('./utils')// 引入utils工具模塊，具體查看我的博客關於utils的解釋，utils主要用來處理css-loader和vue-style-loader的
const config = require('../config')// 引入config目錄下的index.js配置文件，主要用來定義一些開發和生產環境的屬性
const vueLoaderConfig = require('./vue-loader.conf')// vue-loader.conf配置文件是用來解決各種css文件的，定義了諸如css,less,sass之類的和樣式有關的loader
// 返回到dir為止的絕對路徑
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
  }
})

var webpack = require("webpack");

// 配置webpack編譯入口
module.exports = {
  context: path.resolve(__dirname, '../'),
  //entry告訴Webpack哪些文件是應用程序的入口點;主要文件;
  entry: {
    app: './src/main.js'
  },

// 配置webpack輸出路徑和命名規則
  output: {
    path: config.build.assetsRoot,
    //path代表我們要輸出的路徑，config.build.assetsRoot里是assetsRoot: path.resolve(__dirname, '../dist')，這個是想把打包出來的文件路徑放在根目錄的dist目錄下。
    filename: '[name].js',
    //filename: '[name].js'文件名，這個是用來打包后出的文件名，name就是入口文件前面的key值，此處是index和admin.為什么用name，因為會打包出來三個文件，第一個是源代碼文件，第二個是runtime文件，第三個是ventor文件，所以每個文件打包出來的名字就跟定義的chunkname一致。
    publicPath: process.env.NODE_ENV === 'production'// webpack編譯輸出的發布路徑; 上線地址，也就是真正的文件引用路徑，
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  plugins: [
    new webpack.ProvidePlugin({
      jQuery: 'jquery',
      $: 'jquery' 
    })
  ],

// resolve是webpack的內置選項，也就是說當使用 import "jquery"，該如何去執行這件事 
// 情就是resolve配置項要做的，import jQuery from "./additional/dist/js/jquery" 這樣會很麻煩，可以起個別名簡化操作
  resolve: {
    extensions: ['.js', '.vue', '.json'], // 省略擴展名，也就是說.js,.vue,.json文件導入可以省略后綴名，這會覆蓋默認的配置，所以要省略擴展名在這里一定要寫上
    alias: {  //alias是配置別名，什么是別名呢，如果你在一個很深的文件引入其他文件中又一個很深的文件，
      'vue$': 'vue/dist/vue.esm.js',
      /* 相對路徑會寫到吐血，那用別名我們定入一個入口位置，我們用@來代替src目錄的絕對路徑，此時就, 用到了上面function resolve封裝的函數，此時絕對路徑就定位到了src目錄，因為我們所有文件 都放在src目錄下，就可以通過src目錄直接定位到你想要找的文件。 */
      '@': resolve('src'), 

    }
  },

// module配置不同類型模塊的處理規則

  module: {
    rules: [
      ...(config.dev.useEslint ? [createLintingRule()] : []),
      // 對vue文件使用vue-loader，該loader是vue單文件組件的實現核心，專門用來解析.vue文件的
      {
        test: /\.vue$/,
        loader: 'vue-loader',  // 對js文件使用babel-loader轉碼,該插件是用來解析es6等代碼
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')] // 指明src和test目錄下的js文件要使用該loader
      },
      /* 對圖片相關的文件使用 url-loader 插件，這個插件的作用是將一個足夠小的文件生成一個64位的DataURL 可能有些老鐵還不知道 DataURL 是啥，當一個圖片足夠小，為了避免單獨請求可以把圖片的二進制代碼變成64位的 */
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,// 限制 10000 個字節以下轉base64，以上不轉
          name: utils.assetsPath('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)(\?.*)?$/,//引用font-icon
        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'
  }
}

----------------