vue2.0 关于 vue.config.js配置项详解

const CompressionPlugin = require('compression-webpack-plugin')// 引入gzip压缩插件
const TerserPlugin = require('terser-webpack-plugin')// 代码打包之后取出console.log压缩代码

const path = require('path')
function resolve(dir) {
  return path.join(__dirname, dir) // path.join(__dirname)设置绝对路径
}

const isProduction = process.env.NODE_ENV === 'production' 
//为生产环境修改配置...process.env.NODE_ENV !== 'development'


module.exports = {

  outputDir: process.env.outputDir,//默认输出文件夹为dist，填入的名字为打包后的文件名

  /*
  devServer的作用
    如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。
    devServer.proxy 可以是一个指向开发环境 API 服务器的字符串：http://192.168.xx.153:11140
  */

  devServer: { // dev环境下，webpack-dev-server 相关配置
    host: '0.0.0.0',//开发运行时域名，设置成'0.0.0.0'//运行之后的ip可以写成127.0.0.1

    port: 81,
//开发运行时的端口可以写成 process.env.VUE_APP_port 获取到.env.development中的VUE_APP_port

    disableHostCheck: true,
    overlay: {
      warnings: true,
      errors: true,
    },

    proxy: {//代理设置
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      '/api': {
        // target: 'http://192.168.xx.153:11140',
        changeOrigin: true, //表示是否改变原域名
        // pathRewrite: {
        //   '^/api': '',
        // },
      },
    },
  },

  lintOnSave: false,// 是否触发eslint检查
  filenameHashing: !isProduction, //判断是否需要添加hash值

  productionSourceMap: false, 
//打包后是否生成map文件，map文件能看到错误代码位置，设置为false不生成map文件，打包体积缩小

  css: {
    loaderOptions: {
      // 定义全局scss无需引入即可使用
      sass: {
        prependData: `
        @import "~@/styles/var-ext.scss";
        @import "~@/styles/mixin.scss";
        `,
      },
    },
  },

  /**
   * 
   * @param {chainWebpack} config 
   * 通过链式编程的形式，来修改默认的webpack配置
  */

  chainWebpack: (config) => {
    if (isProduction) {
      // config.plugins.delete('prefetch')
      // config.plugins.delete('preload')
      // config.optimization.splitChunks({ // 开启代码分割
      //   chunks: 'all'
      // })
      config.output.filename(`js/[name].[contenthash].js`).end()
      config.output.chunkFilename(`js/[name].[contenthash].js`).end()
      config.plugin('extract-css').tap((args) => [
        {
          filename: `css/[name].[contenthash].css`,
          chunkFilename: `css/[name].[contenthash].css`,
        },
      ])
    }

    /*
      设置别名alias
      webpack默认是将src的别名设置为@, 此外，我们可以进行添加
    */

    config.resolve.alias
      .set('@', resolve('./src'))
      .set('components', resolve('./src/components'))
    
    /*
    在webpack中 rules 是 module 的配置项，而所有的配置的都是挂载到 config 下的，所以新增一个rule方式：
    config.module
      .rule(name)
        .use(name)
          .loader(loader)
          .options(options)    
    */
    
    // md 配置
    config.module
      .rule('md')
      .test(/\.md/)
      .use('html-loader')
      .loader('html-loader')
      .end()
      .use('markdown-loader')
      .loader('markdown-loader')
      .end()
    
    //压缩svg图片
    config.module.rule('svg').exclude.add(resolve('src/assets/icons'))

    //压缩icons图标
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/assets/icons'))
      .end() // add完上下问进入数组 使用end回退
      .use('svg-sprite-loader') // 添加loader
      .loader('svg-sprite-loader') // 切换上下文loader
      .options({ symbolId: 'icon-[name]' })// 参数配置
      .end()
    
    /**
      * rules的修改
      * 针对已经存在的 rule , 如果需要修改它的参数, 可以使用 tap 方法：
      * config.module
      *  .rule(name)
      *    .use(name)
      *      .tap(options => newOptions)
     */

    //压缩图片
    config.module
      .rule('images')
      .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
      .use('url-loader') // `url-loader`是webpack默认已经配置的，现在我们来修改它的参数
      .loader('url-loader')
      .tap(options => {
        // 修改它的选项... 图片命名增加 hash 值，预防相同图片缓存和 不同目录下的同名文件相互覆盖问题
        options.fallback.options.name = 'img/[name].[hash:7].[ext]'
        options.limit = 1024
        // 这是字节(Byte)限制，1KB = 1024Byte ,当图片的大小小于 1KB ,则会被转为 base64格式，打包进js文件，大于1KB,则会被打包进 img 文件夹，供链接请求获取。
        return options
      })
  },

  /**
   * 
   * @param {configureWebpack} config 
   * 通过操作对象的形式，来修改默认的webpack配置，该对象将会被 webpack-merge 合并入最终的 webpack 配置
   */

  configureWebpack: (config) => {//configureWebpack函数形式
    if (isProduction) {
      return {
        externals: {},
        plugins: [
          // 开启 gzip 压缩
          new CompressionPlugin({
            test: /\.jpg$|\.png$|\.js$|\.html$|\.css$/, // 匹配文件名
            threshold: 2120, // 对超过 2k 的数据压缩
            deleteOriginalAssets: false, // 不删除源文件
          }),
          // 代码压缩去除console.log
          new TerserPlugin({
            parallel: true,
            sourceMap: false,
            terserOptions: {
              compress: {
                drop_debugger: true,
                drop_console: true,
              },
            },
          }),
        ],
      }
    }
  },
}