[Vue CLI 3] 配置解析之 indexPath
阿新 • • 發佈:2018-12-18
=== amp .config 其他 tput compiler require 指定 .html
在 vue.config.js
配置中有一個 indexPath
的配置,我們先看看它有什麽用?
用來指定 index.html 最終生成的路徑
(相對於 outputDir)
先看看它的默認值:在文件 @vue/cli-service/lib/options.js
中
indexPath: joi.string()
默認值:
indexPath: ‘index.html‘
使用案例:
我們在 vue.config.js 中配置:
indexPath: ‘1/2/3/b.html‘
最終在編譯之後的目錄 dist(默認)下面會生成:
1/2/3/b.html 的文件,內部不會發生變化
我們看一下背後的實現:@vue/cli-service/lib/config/app.js 文件中
兩層判斷:
1、先判斷是不會 product 環境
const isProd = process.env.NODE_ENV === ‘production‘
if (isProd) {}
2、是否配置了 indexPath
if (options.indexPath !== ‘index.html‘) {
}
通過內置的插件去修改路徑,插件文件在 cli-service/lib/webpack/MovePlugin.js
webpackConfig .plugin(‘move-index‘) .use(require(‘../webpack/MovePlugin‘), [ path.resolve(outputDir, ‘index.html‘), path.resolve(outputDir, options.indexPath) ])
這個對應的配置,默認的編譯之後的目錄是 dist,傳入了 2 個路徑:
/* config.plugin(‘move-index‘) */
new MovePlugin(
‘/Users/***/dist/index.html‘,
‘/Users/***/dist/1/2/3/b.html‘
)
我們看一下 webpack 4 下的插件是如何編寫的:
1、它是 class 的方式:
內部包含了 constructor 和 apply(參數是 compiler)
module.exports = class MovePlugin { constructor () {} apply (compiler) {} }
2、constructor 裏面其實要處理傳入的參數:
constructor (from, to) {
this.from = from
this.to = to
}
定義了一個 from,一個 to,然後其實就是把 from 通過 fs 的 moveSync 函數移動到 to 裏面:
這裏我們依賴了工具包:fs-extra
const fs = require(‘fs-extra‘)
具體流程如下:先判斷 from 的路徑是否存在
if (fs.existsSync(this.from)) {
fs.moveSync(this.from, this.to, { overwrite: true })
}
3、apply 內部的結構呢
compiler.hooks.done.tap(‘move-plugin‘, () => {
// ...
})
通過 compiler tap 來註冊插件,這裏的 done 是一個生命周期的鉤子函數:編譯完成
compiler.hooks.someHook.tap()
這裏還有其他鉤子:
- run
- beforeRun
- compile
- beforeCompile
- afterCompile
- emit
- afterEmit
來源:https://segmentfault.com/a/1190000016267660
[Vue CLI 3] 配置解析之 indexPath