vue.config.js - 工作笔记

 vue.config.js

代码

以hc项目为例，进行分析

// 基础路径 注意发布之前要先修改这里
const BASE_URL = process.env.NODE_ENV === 'production'
  ? process.env.VUE_APP_ROOT_URL
  : '/'

const cdn = process.env.NODE_ENV === 'production' ?{  
  // 通过cdn方式使用123456
  js: [
    '//lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js',
    '//lf9-cdn-tos.bytecdntp.com/cdn/expire-3-M/vuex/3.6.2/vuex.min.js',
    '//lf26-cdn-tos.bytecdntp.com/cdn/expire-3-M/vue-router/3.5.1/vue-router.min.js',
    '//lf3-cdn-tos.bytecdntp.com/cdn/expire-3-M/axios/0.21.1/axios.min.js',
    '//lf26-cdn-tos.bytecdntp.com/cdn/expire-3-M/Sortable/1.13.0/Sortable.min.js',

    //'//cdn.staticfile.org/element-ui/2.15.5/index.min.js',
    // '//cdn.staticfile.org/echarts/5.1.2/echarts.min.js',
    '//cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js',
    // '//cdn.staticfile.org/html2canvas/1.3.2/html2canvas.min.js',
    '//cdn.bootcdn.net/ajax/libs/html2canvas/1.4.1/html2canvas.min.js',
  ],
  css: [
    //'//cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css',
    //'//cdn.staticfile.org/element-ui/2.15.5/theme-chalk/index.min.css'
    //'/cdn/element-ui/2.15.5/theme-learun/index.css'
  ]
}:{
  js:[
    '/cdn/vue/2.6.14/vue.js',
    '/cdn/vuex/3.6.2/vuex.min.js',
    '/cdn/vue-router/3.5.1/vue-router.min.js',
    '/cdn/axios/0.21.1/axios.min.js',
    //'/cdn/element-ui/2.15.5/index.js',
    '/cdn/sortable/sortable.js',
    '/cdn/echarts/echarts.min.js',
    '/cdn/html2canvas/html2canvas.min.js'
  ],
  css:[
    //'/font/css/font-awesome.min.css',
    //'/cdn/element-ui/2.15.5/theme-learun/index.css'
  ]
}

/*const path = require('path')
function resolve(dir) {
  return path.join(__dirname, dir)
}*/

// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports = {
  publicPath: BASE_URL, // 根据你的实际情况更改这里
  lintOnSave: process.env.NODE_ENV === 'development',
  productionSourceMap: false,
  parallel:false,
  
  configureWebpack:config =>{
    if (process.env.NODE_ENV !== 'development') {
      return {
          performance: {
          hints: false,
          maxEntrypointSize: 512000,
          maxAssetSize: 512000
        }
      }
    }
  },
  // configureWebpack: config => {
  //     if (process.env.NODE_ENV === 'production') {
  //         return {
  //             plugins: [
  //                 new BundleAnalyzerPlugin()
  //             ]
  //         }
  //     }
  // },
  chainWebpack: (config) => {
    config.plugins.delete('preload') 
    config.plugins.delete('prefetch') 
    // 配置cdn引入
    config.plugin('html').tap((args) => {
      args[0].cdn = cdn;
      return args
    }) 

    //忽略的打包文件
    config.externals({
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      'vuex': 'Vuex',
      'axios': 'axios',
      'element-ui': 'ELEMENT',
    })

    /*config
      .when(process.env.NODE_ENV !== 'development',
        config => {
          config
            .optimization.splitChunks({
              chunks: 'all',
              cacheGroups: {
                vendor: {
                  minChunks:1,
                  minSize:1,
                  chunks: 'all',
                  name: 'chunk-setting',
                  test: resolve('src/config'), // can customize your rules
                }
              }
            })
        }
      )*/

    const entry = config.entry('app')
    entry
      .add('babel-polyfill')
      .end()
    entry
      .add('classlist-polyfill')
      .end()
    /*entry
      .add('@/mock')
      .end()*/
  }
}

分析

1.BASE_URL：基础路径，用于设置静态资源的访问路径。在生产环境中，会使用VUE_APP_ROOT_URL环境变量的值作为基础路径；在开发环境中（production），基础路径为根路径（/）。

const BASE_URL = process.env.NODE_ENV === 'production'
  ? process.env.VUE_APP_ROOT_URL
  : '/'

 

2.cdn：CDN配置对象，包含两个属性：js和css。在生产环境中，通过CDN方式引入指定的JavaScript和CSS文件；在开发环境中，引入本地的JavaScript和CSS文件。

const cdn = process.env.NODE_ENV === 'production' ?{  
  // 通过cdn方式使用123456
  js: [
    '//lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js',
    '//lf9-cdn-tos.bytecdntp.com/cdn/expire-3-M/vuex/3.6.2/vuex.min.js',
    '//lf26-cdn-tos.bytecdntp.com/cdn/expire-3-M/vue-router/3.5.1/vue-router.min.js',
    '//lf3-cdn-tos.bytecdntp.com/cdn/expire-3-M/axios/0.21.1/axios.min.js',
    '//lf26-cdn-tos.bytecdntp.com/cdn/expire-3-M/Sortable/1.13.0/Sortable.min.js',

    //'//cdn.staticfile.org/element-ui/2.15.5/index.min.js',
    // '//cdn.staticfile.org/echarts/5.1.2/echarts.min.js',
    '//cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js',
    // '//cdn.staticfile.org/html2canvas/1.3.2/html2canvas.min.js',
    '//cdn.bootcdn.net/ajax/libs/html2canvas/1.4.1/html2canvas.min.js',
  ],
  css: [
    //'//cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css',
    //'//cdn.staticfile.org/element-ui/2.15.5/theme-chalk/index.min.css'
    //'/cdn/element-ui/2.15.5/theme-learun/index.css'
  ]
}:{
  js:[
    '/cdn/vue/2.6.14/vue.js',
    '/cdn/vuex/3.6.2/vuex.min.js',
    '/cdn/vue-router/3.5.1/vue-router.min.js',
    '/cdn/axios/0.21.1/axios.min.js',
    //'/cdn/element-ui/2.15.5/index.js',
    '/cdn/sortable/sortable.js',
    '/cdn/echarts/echarts.min.js',
    '/cdn/html2canvas/html2canvas.min.js'
  ],
  css:[
    //'/font/css/font-awesome.min.css',
    //'/cdn/element-ui/2.15.5/theme-learun/index.css'
  ]
}

3. module.exports：导出配置对象，用于配置Webpack的相关选项。其中包括以下配置项：

• publicPath：公共路径，用于设置静态资源的访问路径。
• lintOnSave：是否在保存时进行代码检查。在开发环境中开启，以便实时查看代码错误。
• productionSourceMap：是否生成生产环境的源代码映射文件。在生产环境中关闭，以减小文件大小。
• parallel：是否使用多进程并行处理资源。在开发环境中关闭，以提高构建速度。
• configureWebpack：自定义Webpack配置函数。在生产环境中，配置性能优化选项，包括禁用警告、设置最大入口点和资产大小。
• chainWebpack：链式操作Webpack配置函数。用于修改Webpack配置对象。在这个例子中，删除了预加载和预获取插件，配置了CDN引入，并设置了忽略打包的文件

• module.exports = {
    publicPath: BASE_URL, // 根据你的实际情况更改这里
    lintOnSave: process.env.NODE_ENV === 'development',
    productionSourceMap: false,
    parallel:false,
    
    configureWebpack:config =>{
      if (process.env.NODE_ENV !== 'development') {
        return {
  
  //configureWebpack中的performance：性能配置对象，用于设置Webpack构建时的性能相关选项。
  //在这个例子中，禁用了警告（hints: false），
  //并设置了最大入口点和资产大小（maxEntrypointSize: 512000, maxAssetSize: 512000）。
            performance: {
            hints: false,
            maxEntrypointSize: 512000,
            maxAssetSize: 512000
          }
        }
      }
    },
  
  
  
  //chainWebpack中的config.plugins.delete('preload')和config.plugins.delete('prefetch')：
  //删除预加载和预获取插件，以避免不必要的网络请求。
    chainWebpack: (config) => {
      config.plugins.delete('preload') 
      config.plugins.delete('prefetch') 
  
      // chainWebpack中的config.plugin('html').tap((args) => {...})：
  //配置HTML插件，将CDN配置对象添加到模板中。
      config.plugin('html').tap((args) => {
        args[0].cdn = cdn;
        return args
      }) 
  
      //忽略的打包文件
  //chainWebpack中的config.externals({...})：设置外部依赖，
  //避免将这些依赖打包到最终的bundle文件中。在这个例子中，
  //排除了vue、vue-router、vuex和axios。
      config.externals({
        'vue': 'Vue',
        'vue-router': 'VueRouter',
        'vuex': 'Vuex',
        'axios': 'axios',
        'element-ui': 'ELEMENT',
      })
  
   //chainWebpack中的const entry = config.entry('app')：
  //获取应用程序的入口配置对象，并添加babel-polyfill和classlist-polyfill，以确保兼容性。
      const entry = config.entry('app')
      entry
        .add('babel-polyfill')
        .end()
      entry
        .add('classlist-polyfill')
        .end()
      /*entry
        .add('@/mock')
        .end()*/
    }
  }

 部分分析写在代码中了~