vue 指定index.html,[Vue CLI 3] 配置解析之 indexPath
原标题:[Vue CLI 3] 配置解析之 indexPath 在 vue.config.js 配置中有一个 indexPath 的配置,我们先看看它有什么用?用来 指定 index.html 最终生成的路径(相对于 outputDir)先看看它的默认值:在文件 @vue/cli-service/lib/options.js 中indexPath: joi.string()默认值:indexPat
原标题:[Vue CLI 3] 配置解析之 indexPath
在 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 环境
constisProd =
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) ])
通过 plugin 生成插件,名字为 move-index
然后 use 来加载对应的插件,里面还有参数
这个对应的配置,默认的编译之后的目录是 dist,传入了 2 个路径:
/* config.plugin('move-index') */
new MovePlugin( '/Users/***/dist/index.html', '/Users/***/dist/1/2/3/b.html' )
我们看一下 webpack 4 下的插件是如何编写的:
1、它是 class 的方式:
定义了一个 MovePlugin的 class
内部包含了 constructor 和 apply(参数是 compiler)
module.exports = classMovePlugin{
constructor() {} apply (compiler) {} }
2、constructor里面其实要处理传入的参数:
constructor(from, to) { this.from = from this.to = to }
定义了一个 from,一个 to,然后其实就是把 from 通过 fs 的 moveSync 函数移动到 to 里面:
这里我们依赖了工具包:fs-extra
constfs = require('fs-extra')
具体流程如下:
先通过 fs.existsSync判断 from 的路径是否存在
再调用fs.moveSync来移动文件,设置了 overwrite为 true
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
责任编辑:
更多推荐
所有评论(0)