vue-cli腳手架之webpack.base.conf.js

webpack相關的重要配置文件將在這一節給出。webpack水很深啊^o^，在此先弄清楚原配文件內容的含義，後續能夠本身根據實際狀況配置。

 

webpack.base.conf.js:配置vue開發環境的webpack配置，處理各類文件（js啊、css啊、html啊...）

'use strict'//js嚴格模式執行
const path = require('path')//引入node.js路徑模塊
const utils = require('./utils')//引入utils工具模塊，主要處理css-loader和vue-style-loader
const config = require('../config')//引入config文件夾下的index.js文件
const vueLoaderConfig = require('./vue-loader.conf')//引入vue-loader工具模塊 function resolve (dir) {//返回當前目錄的平行目錄的路徑 return path.join(__dirname, '..', dir)
}

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {//輸入
    app: './src/main.js'//入口文件爲main.js
  },
  output: {//輸出
    path: config.build.assetsRoot,//打包後文件輸出路徑，看看本身的index.js中build配置中的assetsRoot是啥目錄
    filename: '[name].js',//輸出文件名稱默認使用原名
    publicPath: process.env.NODE_ENV === 'production'//真正的文件引用路徑，請看本身的index.js中build配置中寫的啥
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {//決定要作的事情
    extensions: ['.js', '.vue', '.json'],//省略擴展名，也就是說當使用.js .vue .json文件導入能夠省略後綴名
    alias: {
      'vue$': 'vue/dist/vue.esm.js',//$符號指精確匹配，路徑和文件名要詳細 '@': resolve('src'),//resolve('src‘)//resolve('src')指的是項目根目錄中的src文件夾目錄，導入文件的時候路徑能夠這樣簡寫 import somejs from "@/some.js"就能夠導入指定文件
    }
  },
//用來解析不一樣模塊
  module: {
    rules: [
      {
        test: /\.vue$/,//正則表達式，表示當前loader能檢測.vue類型的文件（分析這個正則：/標記正則表達式的開始和結束，指的是在開始和結尾處哦，不然要使用/就得轉義\/;\.表示.,此處的\將.標記爲原意字符；$是正則表達式的結束？這個我不知道...）
        loader: 'vue-loader',//對vue文件使用vue-loader，該loader是vue單文件組件的實現核心，解析.vue文件
        options: vueLoaderConfig//將vueLoaderConfig當作參數傳遞給vue-loader,解析css相關文件
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',//對js文件使用babel-loader轉碼，該插件用來解析es6等代碼
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]//指明src文件夾 test文件夾 client文件夾下的js文件要使用該loader
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,//這些格式結尾的圖片文件
        loader: 'url-loader',//圖片文件使用url-loader插件，將圖片轉爲base64格式字符串
        options: {
          limit: 10000,//10000個字節如下的文件才用來轉爲dataUrl
          name: utils.assetsPath('img/[name].[hash:7].[ext]')//超過10000字節的圖片，就按照制定規則設置生成的圖片名稱，能夠看到用了7位hash碼來標記，.ext文件是一種索引式文件系統
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,//音頻 視頻類文件
        loader: 'url-loader',//也是用url-loader
        options: {
          limit: 10000,//10000個字節如下的文件才進行轉換
          name: utils.assetsPath('media/[name].[hash:7].[ext]')//這個name究竟是給誰起的啊喂，給超過limit字節限制的文件起的
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,//處理字體相關
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      },
      /*添加sass開始*/
      {
        test:/\.(woff2?|eot|ttf|otf)(\?.*)?$/,//這個能夠在vue組件中用sass scss等...
        loaders:['style','css','sass'],
      }
      /*添加sass結束*/
    ]
  },
  node: {//一個對象，每一個屬性都是node.js全局變量或模塊的名稱，value爲empty表示提供空對象 // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native).
    setImmediate: false,//false表示什麼都不提供，話說參數setImmediate表示異步遞歸？？？須要查閱node文檔了 // 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'
  }
}