史上最詳細的webpack 講解3 （webpack.base.conf.js基礎配置）

做者混元霹靂手-Ziksang

隔了好幾天了，我終於又出來了，今天我給你們講講vue-cli中webpack.base.conf.js的基礎配置，看看尤大神對這些配置作了那些重要性的處理的，不用看webpack-cli已是一個很成熟的腳手架了，對於它的配置在webpack的更新中，做者也不停的更新，其中也有其實中的函意和道理

首先對引入的模塊有那些，那爲何要引入這些模塊

var path = require('path')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')複製代碼

1.path模塊不用說你們確定都知道，是理一些路徑的，不管是在這個配置裏還其它配置中，這個是必不可少的
2.util是對vue-loader對於css預編譯一些提取的工具模塊，由於對於我的開發而言，在裏面提供了，sass,less,stylus,possCss等一系列預編譯解析的loader
3.config是對開發環境和生產環境的一系列不一樣參數的，路徑等配置
4.vueLoaderConfig也是一樣基礎生產環境和開發環境對vue-loader進行的配置

以上四點雖然講的很籠統，可是基於這些東西，起碼你們內心有個印象，知道那些東西是幹麻的，不會很迷茫的看這些東西

接下來往下面看看

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}
`複製代碼

這封裝了一個函數，進行傳參，獲取絕對路徑，方便對import時引入地址的方便填寫

path.join()是對多個字符串進行拼接

此時__dirname是build文件路徑..表明再出去一層，就是文件的根路徑，那dir這個參數則是你要傳的文件夾，若是咱們傳src的話就是從src目錄開始找

entry: {
    app: './src/main.js'
  },複製代碼

咱們打包的時候入口js文件確定是main.js若是你強烈本身想換文件名也沒有問題，可是有一點，若是不管是執行的是build.js仍是dev-sever.js這個路徑應該是../src/main.js可是爲是當前路徑呢，由於有一個content執行上下文的東西，默認執行的就是你的根目錄

output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },複製代碼

output是咱們輸文件輸出的路徑
1.path表明咱們要輸出的路徑，咱們去看看config.build.assetsRoot裏面是什麼東西，assetsRoot: path.resolve(__dirname, '../dist'),找了一下是這個玩意，能夠看出來做者想把打包出來的文件路徑放在根目錄下的dist目錄下
2.filename: '[name].js' 文件名，這個是用來打包名出的文件名，爲何要用[name]呢，由於會打包出來三個文件，第一個是本身的原代碼文件，第二個是runtime文件，第三個是ventor文件，因此每一個文件打包出來的名字，就跟定義的chunkname一致

publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath複製代碼

這個是靜太文件訪問的路徑，這個要根據你靜態文件的loader進行拼接配置，後面會跟你們講，這樣會更清楚一點，咱們先看來這段是什麼意思，當進行環境是生產環境 的話咱們就用config文件中config.build.assetsPublicPath這個屬性，若是是生產環境 ，咱們則用config.dev.assetsPublicPath中的屬性，那二者都是「/」,先大體理解，日後面看你就知道了

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
    }
  },複製代碼

接下來就是resolve配置了，看看這個配置裏面用了那些東西
resolve是用來對模塊進行解析，就是所謂的libary第三方庫
1.extensions 是對模塊的後綴進行解析，當咱們引入本身寫的模塊，比方說var config = require('../config') webpack.base裏引入了config模塊的時候，沒有帶js後綴，那文件會不會識別，本質上不會識別，可是有了這個配置，會先進.js後綴進行匹配，沒有再匹配.vue，沒有再匹配.json，仍是沒有找到的話,則會報錯，文件沒有找到no find

2.alias 是配置別名，什麼是別名呢，若是你在一個很深的文件引入其它文件中又一個很深的文件，你會很煩，相對路徑會寫吐血，那用別名咱們定入一個入口位置，咱們@來代替src目錄的絕對路徑，此時就用到了上面function resolve封裝的函數，此時就絕對路徑就定位到了src目錄，由於咱們全部文件都放在src目錄下，咱們就能夠經過src目錄直接定位到你想要找的文件

module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  }複製代碼

ES2015 import 語句
CommonJS require() 語句
AMD define 和 require 語句
css/sass/less 文件中的 @import 語句。
樣式(url(...))或 HTML 文件(img src=...)中的圖片連接(image url)
對於這個模塊是webpack開箱即用的，不用咱們去配置這個模塊轉換

咱們看看這個參數是用來幹麻的
1.test是用來解析全部.vue後綴的文件，
2.loader咱們用什麼npm什麼形式的loader去解析
3.include是表明咱們解析的文件只包含那些東西
比方說babel-loader是進行es6轉換成es5的，可是考慮性能問題，打包時間問題，咱們不考慮解析node-module裏的文件
include: [resolve('src'), resolve('test')] 這裏用一個數組來包括的要解析的文件夾路徑，仍是再次用到了relsove這個封裝的函數

options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }複製代碼

options是對解析文件參數配置
1.對於url-loader來講 limit10000表明當小時1000kb的文件咱們則能夠轉面base64
2.name : 對輸出的內容地行地址轉換，當咱們一個圖在dev開發的時候用../../aa/aa.jpg，你想到生產環境地址確定不會對那怎麼樣此時就要用到地址轉換

前面講到 publicPath是用來幹麻的，當咱們轉換的時候，是用publicPath公共路徑+name路徑名返回的址，
那utils.assetsPath()又是什麼？
咱們去找找看

exports.assetsPath = function (_path) {
  var assetsSubDirectory = process.env.NODE_ENV === 'production'
    ? config.build.assetsSubDirectory
    : config.dev.assetsSubDirectory
  return path.posix.join(assetsSubDirectory, _path)
}複製代碼

這個我是在uilts.js工具庫模塊中找到的，也是封裝成了一個方法，先看進程是開發環境仍是生產環境，指向的都是static文件夾

path.posix.join(assetsSubDirectory, _path)是node的一個兼容性寫法，若是咱們用
utils.assetsPath('img/[name].[hash:7].[ext]')方法來調用的話，最後返回就是
/static/img/aa42432432423.jpg 就是publicpath+/static/圖片名+hash+圖片後綴來進行返回。大家在vue-cli中引入一個圖看大家看看，就能看到結果了

options: vueLoaderConfig
是對vue文件的style樣式進行解析，解析編譯，再進行ExtractTextPlugin來進行合併，等我這把這個研究透了，再來和你們說，大體意思就是這麼玩

你說vue難仍是webpack難，我跟你說 webpack難。哈哈，本身去體會吧

渣渣前端開發工程師，喜歡鑽研，熱愛分享和講解教學， 微信 zzx1994428 QQ494755899

支持我繼續創做和感到有收穫的話，請向我打賞點吧

若是轉載請標註出自@混元霹靂手-ziksang