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 => {}
  } // 第三方插件配置
}

你可能感兴趣的:(webpack,vue,plugins)