此文章用來解釋vue-cli腳手架build目錄中的webpack.base.conf.js配置文件
- 此配置文件是vue開發環境的wepack相關配置文件，主要用來處理各種文件的配置
- 關於注釋
- 當涉及到較復雜的解釋我將通過標識的方式(如（1）)將解釋寫到單獨的注釋模塊，請自行查看
- 上代碼
// 引入nodejs路徑模塊
var path = require('path')
// 引入utils工具模塊，具體查看我的博客關於utils的解釋，utils主要用來處理css-loader和vue-style-loader的
var utils = require('./utils')
// 引入config目錄下的index.js配置文件，主要用來定義一些開發和生產環境的屬性
var config = require('../config')
// vue-loader.conf配置文件是用來解決各種css文件的，定義了諸如css,less,sass之類的和樣式有關的loader
// 詳情請看(1)
var vueLoaderConfig = require('./vue-loader.conf')
// 此函數是用來返回當前目錄的平行目錄的路徑，因為有個'..'
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
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: {
rules: [
{
test: /\.(js|vue)$/,
// 也就是說，對.js和.vue文件在編譯之前進行檢測，檢查有沒有語法錯誤
loader: 'eslint-loader',
// 此選項指定enforce: 'pre'選項可以確保，eslint插件能夠在編譯之前檢測，如果不添加此項，就要把這個配置項放到末尾，確保第一個執行
enforce: 'pre',
// include選項指明這些目錄下的文件要被eslint-loader檢測，還有一個exclude表示排除某些文件夾
include: [resolve('src'), resolve('test')],
// options表示傳遞給eslint-loader的參數
options: {
// formatter是參數的名稱，eslint-friendly-formatter是eslint的一個報告總結插件，也就是說eslint的檢測
報告非常難看懂，這個插件就是整理這些報告方便查閱的
formatter: require('eslint-friendly-formatter')
}
},
{
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')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
// 對圖片相關的文件使用 url-loader 插件，這個插件的作用是將一個足夠小的文件生成一個64位的DataURL
// 可能有些老鐵還不知道 DataURL 是啥，當一個圖片足夠小，為了避免單獨請求可以把圖片的二進制代碼變成64位的
// DataURL，使用src加載，也就是把圖片當成一串代碼，避免請求，神不神奇？？
loader: 'url-loader',
options: {
// 限制 10000 個字節一下的圖片才使用DataURL
limit: 10000,
// 下面這個應該是指將[name].[hash:7].[ext]對應的圖片使用url-loader測試吧，這個我是真不知道干啥的，如果知道
// 的兄弟，一定要留言給我啊，拜謝
name: utils.assetsPath('img/[name].[hash:7].[ext]') // 這個函數執行結果是 /img/[name].[hash:7].[ext]
// 不知道吧 name 設置成 /img/[name].[hash:7].[ext] 意欲何為，猜測應該是輸出圖片的路徑或者是解析圖片的路徑
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
// 字體文件處理，和上面一樣
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
}
}
解釋
(1)下面是vue-loader.conf.js配置文件的解釋，如果你看過我關於utils的解釋，下面很好懂
// utils配置文件用來解決css相關文件loader
var utils = require('./utils')
// 生產和開發環境的相關屬性
var config = require('../config')
// 判斷當前是否生產環境
var isProduction = process.env.NODE_ENV === 'production'
module.exports = {
// 調用utils配置文件中的cssLoaders方法，用來返回配置好的css-loader和vue-style-loader
loaders: utils.cssLoaders({
sourceMap: isProduction
? config.build.productionSourceMap
: config.dev.cssSourceMap, // 這一句話表示如何生成map文
extract: isProduction // 這一項是自定義配置項，設置為true表示生成單獨樣式文件
})
}
