2021-06-15

process 对象是一个全局变量，提供了有关当前 Node.js 进程的信息并对其进行控制。 作为全局变量，它始终可供 Node.js 应用程序使用，无需使用 require()。
它也可以使用 require() 显式地访问const process = require(‘process’)
process.env 是 Node.js 中的一个环境对象即返回包含用户环境的对象。其中保存着系统的环境的变量信息。通俗来讲，该属性可以返回项目运行环境的信息。此对象的示例如下：

{
  TERM: 'xterm-256color',
  SHELL: '/usr/local/bin/bash',
  USER: 'nodejscn',
  PATH: '~/.bin/:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin',
  PWD: '/Users/nodejscn',
  EDITOR: 'vim',
  SHLVL: '1',
  HOME: '/Users/nodejscn',
  LOGNAME: 'nodejscn',
  _: '/usr/local/bin/node'
}

可以用直接赋值的方式直接修改此对象（所赋的值会被隐式转换为字符串）,也可以直接用delete删除某个属性

process.env.foo = null;
console.log(process.env.foo);//'null'

delete process.env.foo;
console.log(process.env.foo);//undefined

当我们运行项目并且打包的时候，会发现chunk-vendors.js这个文件非常大，那是因为webpack将所有的依赖全都压缩到了这个文件里面，这时我们可以将其拆分，将所有的依赖都打包成单独的js。生产环境下可以如下配置：

module.exports = {
    // ...
    configureWebpack: config => {
        const plugins = [];
        // 利用环境变量进行判断是否是生产环境production
        if (process.env.NODE_ENV === 'production') { 
            config.externals = {
                'vue': 'Vue',
                'vue-router': 'VueRouter',
                'babylonjs': 'BABYLON'
            }
        }
        // 然后将新增externals选项合并至plugins配置中
        config.plugins = [
            ...config.plugins,
            ...plugins
        ]
    },
    chainWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            // 生产环境下注入一个变量cdn 变量可以在html中通过htmlWebpackPlugin.options进行获取 
            config.plugin('html')
                .tap(args => {
                    args[0].cdn = 'prod';
                    return args;
                })
        }
    }
}

之所以区分两个环境主要原因是，当我们在开发环境的时候，使用cdn引入js文件会比我们直接模块引入要慢，不是很方便。所以我们想要配置，只在生产环境下才使用externals。
那么，配置的思路就是对当前环境进行判定，如果是生产环境，我们就使用externals；如果是开发环境，就不使用。