day07 - 进度条 +打包报告 + 第三方库CDN引入 + 路由懒加载(2)

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’)

})

}

}

补充：

chainWebpack可以通过链式编程的形式，修改webpack配置

configureWebpack可以通过操作对象的形式，修改webpack配置

7.加载外部CDN

默认情况下，依赖项的所有第三方包都会被打包到js/chunk-vendors.******.js文件中，导致该js文件过大

那么我们可以通过externals排除这些包，使它们不被打包到js/chunk-vendors.******.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’)

//使用externals设置排除项

config.set(‘externals’,{

vue:‘Vue’,

‘vue-router’:‘VueRouter’,

axios:‘axios’,

lodash:‘_’,

echarts:‘echarts’,

nprogress:‘NProgress’,

‘vue-quill-editor’:‘VueQuillEditor’

})

})

//开发模式

config.when(process.env.NODE_ENV === ‘development’,config=>{

config.entry(‘app’).clear().add(‘./src/main-dev.js’)

})

}

}

设置好排除之后，为了使我们可以使用vue，axios等内容，我们需要加载外部CDN的形式解决引入依赖项。

打开开发入口文件main-prod.js,删除掉默认的引入代码

import Vue from ‘vue’

import App from ‘./App.vue’

import router from ‘./router’

// import ‘./plugins/element.js’

//导入字体图标

import ‘./assets/fonts/iconfont.css’

//导入全局样式

import ‘./assets/css/global.css’

//导入第三方组件vue-table-with-tree-grid

import TreeTable from ‘vue-table-with-tree-grid’

//导入进度条插件

import NProgress fro