vue.config.js 打包、压缩配置compression-webpack-plugin

var fs = require('fs')
const path = require('path')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
// const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']

function resolve (dir) {
  return path.join(__dirname, dir)
}

const address = require('address')
const localhost = address.ip() || 'localhost'

if (process.env.VUE_APP_ENV) {
  const path = './serverconfig/nginx/online/conf.d'
  const readable = fs.createReadStream(path + '/cl.mw.emao.com.' + process.env.VUE_APP_ENV + '.conf.txt')
  // 创建写入流
  const writable = fs.createWriteStream(path + '/cl.mw.emao.com.conf')
  // 通过管道来传输流
  readable.pipe(writable)
}

module.exports = {
  // productionSourceMap: true,
  chainWebpack: (config) => {
    config.resolve.alias
    // 移除 prefetch 插件
    // config.plugins.delete('prefetch')
    // .set('@',resolve('src'))
      .set('$api', resolve('src/api'))
      .set('$models', resolve('src/components'))
      .set('$utils', resolve('src/utils'))

    if (process.env.npm_config_report) {
      config
        .plugin('webpack-bundle-analyzer')
        .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
        .end()
    }
  },
  configureWebpack: config => {
    if (process.env.NODE_ENV == 'production') {
      config.mode = 'production'
      config.optimization.minimizer = [
        new UglifyJsPlugin({
          uglifyOptions: {
            // 删除注释
            output: {
              comments: false
            },
            // 删除console debugger 删除警告
            compress: {
              drop_console: true, // console
              drop_debugger: false,
              pure_funcs: ['console.log']// 移除console
            },
            warnings: false	//	这样写就不报错
          }
        })
      ]

      config.externals = {
        vue: 'Vue',
        vuex: 'Vuex',
        'vue-router': 'VueRouter',
        axios: 'axios'
        // 'element-ui': 'ELEMENT'
      }

      config.plugins = [
        ...config.plugins,
        new CompressionWebpackPlugin({
          // 匹配文件名
          test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
          // 对超过10k的数据压缩
          threshold: 10240,
          minRatio: 0.8,
          // 删除源文件
          deleteOriginalAssets: false
        })
        // new webpack.optimize.LimitChunkCountPlugin({
        //   maxChunks: 5,
        //   minChunkSize: 100
        // })
      ]
    } else {
      // 为开发环境修改配置...
      config.mode = 'development'
    }

    config.externals = {
      'BMapGL': 'BMapGL',
      'mapvgl': 'mapvgl'
    }
  },

  devServer: {
    open: process.platform === 'darwin',

    disableHostCheck: false,

    host: localhost,

    port: 6650,

    https: false,

    hotOnly: false, // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#configuring-proxy

    proxy: null // string | Object

    // before: app => {}
  } // 第三方插件配置
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值