vue2.0项目配置：（一）vue.config.js配置

//需要下载的依赖
const moment = require('moment');
const TerserPlugin = require('terser-webpack-plugin')
const FileManageerPlugin = require('filemanager-webpack-plugin');
const CompressionPlugin = require("compression-webpack-plugin");


module.exports = {
    
    productionSourceMap: false, // 生产环境不输出map文件，以加速生产环境构建。
    transpileDependencies: ['*'],
    //publicPath:'./', //修改为相对路径,打包时放开改配置（或者： publicPath: process.env.BASE_URL,）
   outputDir: 'dist', // 运行时生成的生产环境构建文件的目录(默认''dist''，构建之前会被清除)
   indexPath: 'home.html', //指定生成的 home.html 的输出路径(相对于 outputDir)也可以是一个绝对路径。
   assetsDir: './' +  new Date().getTime() + '/static',
   lintOnSave: false, // 是否在保存的时候检查

   //生产环境取消 console.log (通过 terser-webpack-plugin 来实现) 
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;
      const plugins = [];
      const fileTimeName = moment().format('YYYY-MM-DD-HHmm');
      plugins.push(
        new TerserPlugin({
          terserOptions: {
            compress: {
              drop_console: true,
              drop_debugger: true
            }
          },
          cache: true, // 启用文件缓存
          parallel: true // 使用多进程并行运行来提高构建速度
          // sourceMap: false // 映射错误信息到模块
        })
      )
     //打包时自动生成dist.zip + 时间戳
      plugins.push(
        new FileManageerPlugin({
          onEnd: {
            //创建目录
            mkdir: ['./tempzip/' + 'dist'],
            //复制文件到tempzip
            copy: [{
              source: './dist',
              destination: './tempzip/' + 'dist'
            },],
            //打包temzip，输出到根目录下
            archive: [{
              source: './tempzip/',
              destination: `admin-web-time:${fileTimeName}.zip`
            }],
            //删除tempzip
            delete: [
              './tempzip/'
            ]
          }
        })
      );
      config.plugins = [
        ...config.plugins,
        ...plugins
      ]
    }
    // 公共代码抽离
    config.optimization = {
      splitChunks: {
           runtimeChunk: 'single',
           chunks: 'all',
           minSize: 20000, // 允许新拆出 chunk 的最小体积，也是异步 chunk 公共模块的强制拆分体积
           // minChunks: 2,
            maxAsyncRequests: 6, // 每个异步加载模块最多能被拆分的数量
            maxInitialRequests: 6, // 每个入口和它的同步依赖最多能被拆分的数量
           enforceSizeThreshold: 25000, // 强制执行拆分的体积阈值并忽略其他限制
        cacheGroups: {
          antDesign: {
             name: 'chunk-antDesign',
             test: /[\\/]node_modules[\\/]_?@ant-design(.*)/,
             priority: 39,
             minSize: 0,
             enforce: true
                    },
          common: {
            chunks: 'all', // 'all',  'async'仅打包异步引用的依赖， 'initial', 仅打包同步引用的依赖
            test: /[\\/]src[\\/]js[\\/]/,  //正则
            name: 'common',
            minChunks: 2,
            maxInitialRequests: 5,
            minSize: 0,
            priority: 60
          },
          styles: {
            name: 'styles',
            test: /\.(sa|sc|c)ss$/,
            chunks: 'all',
            enforce: true
          },
          runtimeChunk: {
            name: 'manifest'
          }
        }
      }
    }
  },

  chainWebpack: config => {
    config.module.rule('js').use('babel-loader')
    config.entry('main').add('babel-polyfill')
    // 开启图片压缩
    config.module.rule('images')
      .test(/\.(png|gif|jpe?g|svg)(\?.*)?$/)
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({
        bypassOnDebug: true
      })
      .tap(options => Object.assign(options, {
        limit: 6140
      }))
    // 生产环境开启js、css压缩
    if (process.env.NODE_ENV === 'production') {
      config.plugin('webpack-report').use(BundleAnalyzerPlugin, [{analyzerMode: 'static'}])                
      config.plugin('compressionPlugin')
        .use(new CompressionPlugin({
          test: /\.(js|css|less)$/, // 匹配文件名
          threshold: 10240, // 对超过10k的数据压缩
          deleteOriginalAssets: false // 不删除源文件
        }))
    }
    //设置快捷符号代替指定路径（@默认src文件夹）
    config.resolve.alias
       .set('@$', resolve('src'))
       .set('@api', resolve('src/api'))
       .set('@assets', resolve('src/assets'))
       .set('@comp', resolve('src/components'))
       .set('@views', resolve('src/views'))

   // 配置 webpack 识别 markdown 为普通的文件
    config.module
       .rule('markdown')
       .test(/\.md$/)
       .use()
       .loader('file-loader')
       .end()
  // 编译vxe-table包里的es6代码，解决IE11兼容问题
   config.module
      .rule('vxe')
      .test(/\.js$/)
      .include
      .add(resolve('node_modules/vxe-table'))
      .add(resolve('node_modules/vxe-table-plugin-antd'))
      .end()
      .use()
      .loader('babel-loader')
      .end()

  },

// 前端运行服务器环境配置
  devServer: { 
    port: 8086,  //服务器端口号
    hot:true,  //热重载
    https: false,
    hotOnly: false,
    open: true, //配置自动启动浏览器
    overlay:{
          warning:false,
          error:true     
        },
    proxy: {  //配置代理
      '/api123': {   //在接口前面携带
        target: 'http://10.158.17.10:8088/pwc_w_web/', // 需要跨域的 地址
        changeOrigin: true, //允许跨域
        ws: false,  //是否开启websocket
        pathRewrite: {
          '^/api123': ''
        }
      }
    },
  },
};