作者混元霹靂手-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