1. 程式人生 > >[Vue CLI 3] 配置解析之 indexPath

[Vue CLI 3] 配置解析之 indexPath

=== 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