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