通过chainWebpack自定义打包入口

默认情况下，vue-cli 3.0生成的项目，隐藏了webpack配置项，如果我们需要配置webpack
需要通过vue.config.js来配置。
在项目根目录中创建vue.config.js文件

把 main.js 文件重命名为 main-prod.js 设置为发布模式的入口文件；
复制相同一份 main.js 重命名为 main-dev.js 设置为开发模式的入口文件

module.exports = {
   
  chainWebpack: config => {
   
    // 发布模式
    config.when(process.env.NODE_ENV === 'production', config => {
   
      // entry找到默认的打包入口，调用clear则是删除默认的打包入口
      // add添加新的打包入口
      config.entry('app').clear().add('./src/main-prod.js')
    })
    // 开发模式
    config.when(process.env.NODE_ENV === 'development', config => {
   
      config.entry('app').clear().add('./src/main-dev.js')
    })
  }
}

默认情况下，依赖项的所有第三方包都会被打包到js/chunk-vendors.**.js文件中，导致该js文件过大
那么我们可以通过externals排除这些包，使它们不被打包到js/chunk-vendors.******.js文件中

module.exports = {
   
  chainWebpack: config => {
   
    // 发布模式
    config.when(process.env.NODE_ENV