通过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 === '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',
	    echarts:'echarts'
	  })
	  // 使用htmlWebpackPlugin插件 以isProd字段判断是否是发布模式 是 返回true
      config.plugin('html').tap(args => {
    
    
        // 添加参数isProd
        args[0].isProd = true
        return args
      })
    })
    // 开发模式
    config.when(process.env.NODE_ENV === 'development', config => {
    
    
      config.entry('app').clear().add('./src/main-dev.js')
      // 使用插件 开发模式 isProd 返回false
      config.plugin('html').tap(args => {
    
    
        // 添加参数isProd
        args[0].isProd = false
        return args
      })
    })
  }
}

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

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

import Vue from 'vue'
import router from './router'
import App from './App.vue'
// import ElementUI from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'
import './assets/fonts/iconfont.css'
import './assets/css/global.css'

import axios from 'axios'

// 配置请求的根路径
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/' // http://timemeetyou.com:8889/api/private/v1/

// 通过axios 请求拦截器 添加token 需要授权的 API ，必须在请求头中使用 `Authorization` 字段提供 `token` 令牌
axios.interceptors.request.use(config => {
    
    
  config.headers.Authorization = window.sessionStorage.getItem('token')
  // 在最后必须return config
  return config
})

// axios 响应拦截器
axios.interceptors.response.use(function (res) {
    
    
  return res.data
}, function (err) {
    
    
  console.log(err)
})

Vue.prototype.$http = axios

// Vue.use(ElementUI) // 通过cdn 加载
// Vue.config.productionTip = false

new Vue({
    
    
  router,
  render: h => h(App)
}).$mount('#app')

<!-- pulic/index.html -->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>后台管理系统</title>
  
  <!-- 发布模式下 加载cdn链接 开发模式下不加载 -->
  <% if(htmlWebpackPlugin.options.isProd){ %>
  <!-- element-ui 的样式表文件 -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.13.2/theme-chalk/index.css" />

  <script src="https://cdn.staticfile.org/vue/2.6.11/vue.min.js"></script>
  <script src="https://cdn.staticfile.org/vue-router/3.2.0/vue-router.min.js"></script>
  <script src="https://cdn.staticfile.org/axios/0.20.0/axios.min.js"></script>
  <script src="https://cdn.staticfile.org/echarts/4.9.0/echarts.min.js"></script>

  <!-- element-ui 的 js 文件 -->
  <script src="https://cdn.staticfile.org/element-ui/2.13.2/index.js"></script>
   <% } %>
</head>

通过chainWebpack自定义打包入口

猜你喜欢