vue/cli4、webpack 简阅（希望能持续更新）

day1

scripts脚本命令触发至：@vue/cli-service/bin/vue-cli-service.js

//获取参数；
//前两个参数分别为node环境地址；运行的js文件地址；
const rawArgv = process.argv.slice(2);
/*利用minimist获取启动参数*/
var args = require('minimist')(process.argv.slice(2))

将参数解析为布尔类型；
var args = require(‘minimist’)(process.argv.slice(2), {
boolean: [‘hello’]
});

例：

node xxx.js --a
//args.a=true;
node xxx.js --a a
//args.a=a;
node xxx.js --a=1
//args.a=1;
**使用=传值是不能有空格**

输入npm run dev 启动时

1、调用 resolvePkg 获取package.json内容；
2、调用resolvePlugins 拿到包含package。json及commands、config文件内所有pugin；
3、调用run方法 加在配置、插件等。并启动。

1获取package.json内容

this.pkg = this.resolvePkg(pkg)

resolvePkg(inlinePkg, context = this.context) {
    if (inlinePkg) {
      return inlinePkg
    }
    // 读取package.json
    const pkg = resolvePkg(context)
    // 判断package.json中的键值对。
    if (pkg.vuePlugins && pkg.vuePlugins.resolveFrom) {
      this.pkgContext = path.resolve(context, pkg.vuePlugins.resolveFrom)
      return this.resolvePkg(null, this.pkgContext)
    }
    return pkg
  }

2、加载所有模块

this.plugins = this.resolvePlugins(plugins, useBuiltIn)

resolvePlugins(inlinePlugins, useBuiltIn) {
    const idToPlugin = id => ({
      // './asd/asdf  => built-in:/asd/asdf'
      id: id.replace(/^.\//, 'built-in:'),
      apply: require(id)
      // id: built-in:/commands/serve
      // apply: require('./commands/serve)
    })

    let plugins
    --------
    --------
    --------
    return plugins；
    /**
    plugins: [
	  {
	    id: 'built-in:commands/serve',
	    apply: [Function] { defaultModes: [Object] }      
	  },
	  {
	    id: 'built-in:commands/build',
	    apply: [Function] { defaultModes: [Object] }      
	  },
	  {
	    id: 'built-in:commands/inspect',
	    apply: [Function] { defaultModes: [Object] }      
	  },
	  { id: 'built-in:commands/help', apply: [Function] },
	  { id: 'built-in:config/base', apply: [Function] },  
	  { id: 'built-in:config/css', apply: [Function] },   
	  { id: 'built-in:config/prod', apply: [Function] },  
	  { id: 'built-in:config/app', apply: [Function] },   
	  { id: '@vue/cli-plugin-babel', apply: [Function] }, 
	  { id: '@vue/cli-plugin-pwa', apply: [Function] },   
	  { id: '@vue/cli-plugin-router', apply: [Function] } 
	]
	*/

3、加载所有模式

this.modes = this.plugins.reduce((modes, {
      apply: {
        defaultModes
      }
    }) => {
      return Object.assign(modes, defaultModes)
    }, {})
//modes: { serve: 'development', build: 'production', inspect: 'development' }

4、调用servicerun方法；启动；

service.run(command, args, rawArgv).catch(err => {
  error(err)
  process.exit(1)
})
/**
command: serve	//启动指令；
args: {		// 启动参数；
  _: [ 'serve' ],
  ...
  ...
  mode: 'dev'
}
rawArgv: [ 'serve', '--mode', 'dev' ]	//启动参数；
*/

run方法的执行

async run(name, args = {}, rawArgv = []) {
	// 配置中有无声明模式，默认为development；
	const mode = args.mode || (name === 'build' && args.watch ? 'development' : this.modes[name])
     
    // --skip-plugins arg may have plugins that should be skipped during init()
    this.setPluginsToSkip(args)

    // load env variables, load user config, apply plugins
    this.init(mode) 
    let command = this.commands[name] 
      args._.shift() // remove command itself
      rawArgv.shift() 
    const {
      fn
    } = command
    console.log('command:', command)
    return fn(args, rawArgv)
  }

init 方法；

this.loadEnv(mode)；
// 获取、设置全局process.env.node_env;如果不是production || test ,全部替换为development；

loadUserOptions（）；
 //加载vue.config.js 中的所有内容；
 //然后合并：node_modules\@vue\cli-service\lib\options.js
 // ``````````````````````
 this.plugins.forEach(({
      id,
      apply
    }) => {
      if (this.pluginsToSkip.has(id)) return
      apply(new PluginAPI(id, this), this.projectOptions)
    })
 // 循环加载PluginAPI 实例；将plugin和config挂载到实例；
 if (this.projectOptions.chainWebpack) {
      	this.webpackChainFns.push(this.projectOptions.chainWebpack)
    }
    // 合并；init结束