vue.config.js

'use strict'

const path = require('path')

// gzip压缩插件
const CompressionWebpackPlugin = require('compression-webpack-plugin')

// 代码打包之后取出console.log压缩代码
const TerserPlugin = require('terser-webpack-plugin')

// 图形化打包详情
const BundleAnalyzer = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

// 编译打包进度
const WebpackBar = require('webpackbar')

function resolve(dir) {
    return path.join(__dirname, dir)
}
const cdn = {
    externals: {
        vue: 'Vue',
        'vue-router': 'VueRouter',
      },
      js: [
        'https://cdn.bootcss.com/vue/2.6.11/vue.runtime.min.js',
    'https://cdn.bootcss.com/vue-router/3.1.2/vue-router.min.js',
    'https://cdn.bootcss.com/axios/0.19.2/axios.min.js',
      ],
      css: [
      ]
  }
  
module.exports={
    devServer: {
        port: 8080, // 端口号
        open: false, // 配置自动启动浏览器
        before (app, server) {
          app.get(/.*.(js)$/, (req, res, next) => {
            req.url = req.url + '.gz'
            res.set('Content-Encoding', 'gzip')
            next()
          })
        }
    },
    chainWebpack: config => {
        // 压缩响应的app.json返回的代码压缩
        config.optimization.minimize(true)
        // 定义文件夹的路径
        config.resolve.alias
        .set('@', resolve('src'))
        .set('assets', resolve('src/assets'))
        .set('components', resolve('src/components'))
        .set('router', resolve('src/router'))
        .set('store', resolve('src/store'))
        .set('views', resolve('src/views'))
        // 移除prefetch插件，避免加载多余的资源
        config.plugins.delete('prefetch')
        // 配置cdn引入
        config.plugin('html').tap(args => {
            args[0].cdn = cdn
            return args
          })
          config.plugin('html').tap(args => { // 所有环境配置统一的title
	        args[0].title = '外部联网协议配置系统'
	        return args
      })
        // 压缩图片
        const imagesRule = config.module.rule('images')
        imagesRule.uses.clear()
        imagesRule.use('file-loader')
            .loader('url-loader')
            .options({
             limit: 10240,
             fallback: {
              loader: 'file-loader',
              options: {
                outputPath: 'static/images'
              }
            }
        })
    },
    configureWebpack: config => {
         // 显示编译进度
       config.plugins.push(
        new WebpackBar({
          name: '编辑🚀',
          color: 'blue',
        }))
      
        // 忽略打包配置
        config.externals = cdn.externals
        //公共代码抽离
        config.optimization = {
            splitChunks: {
              cacheGroups: {
                vendor: {
                  chunks: 'all',
                  test: /node_modules/,
                  name: 'vendor',
                  minChunks: 1,
                  maxInitialRequests: 5,
                  minSize: 0,
                  priority: 100
                }
              }
            }
        },
        // 开启gzip压缩
        config.plugins.push(
          new CompressionWebpackPlugin(
            {
              filename: info => {
                return `${info.path}.gz${info.query}`
              },
              algorithm: 'gzip',
              threshold: 10240, // 只有大小大于该值的资源会被处理 10240
              test: new RegExp('\\.(' + ['js'].join('|') + ')$'
              ),
              minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
              deleteOriginalAssets: false // 删除原文件
            }
          )
        )
    },
}