fu-hsi-web/vue.config.js

const path = require('path')
const {
  publicPath,
  assetsDir,
  outputDir,
  lintOnSave,
  transpileDependencies,
  productionSourceMap,
  runtimeCompiler,
  title,
  devPort,
  providePlugin,
  baseURL,
  imageCompression
} = require('./src/config')

const { version, author } = require('./package.json')
const Webpack = require('webpack')
const WebpackBar = require('webpackbar')
const CompressionPlugin = require('compression-webpack-plugin')
const dayjs = require('dayjs')
const time = dayjs().format('YYYY-M-D HH:mm:ss')
process.env.VUE_APP_TITLE = title || '伏羲'
process.env.VUE_APP_AUTHOR = author || 'sst'
process.env.VUE_APP_UPDATE_TIME = time
process.env.VUE_APP_VERSION = version

const resolve = (dir) => path.join(__dirname, dir)

module.exports = {
  publicPath,
  assetsDir,
  outputDir,
  lintOnSave,
  transpileDependencies,
  runtimeCompiler,
  productionSourceMap,
  /* webpack-dev-server 相关配置 */
  devServer: {
    /* 是否开启热更新 */
    /* 默认true， hotOnly: false,//v4已经删除，由hot: 'only'替代*/
    hot: true,
    port: devPort,
    /* 是否使用协议https */
    https: false,
    /* 编译完成后自动打开浏览器 */
    open: true,
    /* 当有编译错误或者警告的时候显示一个全屏overlay */
    client: {
      overlay: false
    },
    /* 使用代理 */
    /* proxy: 'http://v.juhe.cn', */

    /* '/api' : {}, 就是告诉node, 我接口只要是'/api'开头的才用代理, 所以你的接口就要这么写 /api/xx/xx
      最后代理的路径就是 http://xxx.xx.com/api/xx/xx
      可是不对啊, 我正确的接口路径里面没有 /api 啊. 所以就需要 pathRewrite, 用'^/api' : '', 把'/api'去掉,
      这样既能有正确标识, 又能在请求接口的时候去掉api */
    proxy: {
      '/fuHsiApi': {
        /* 目标代理服务器地址 */
        target: baseURL,
        /* 允许跨域，将请求地址host修改为和被请求的接口一致 */
        changeOrigin: true,
        /* 路径重写 */
        pathRewrite: {
          '^/fuHsiApi': ''
        }
      }
    }
    /* 传递任何第三方插件选项 */
    // pluginOptions: {}
  },
  configureWebpack() {
    return {
      resolve: {
        fallback: {
          path: require.resolve('path-browserify')
        },
        alias: {
          '@': resolve('src')
        }
      },
      plugins: [
        /* gzip压缩 */
        new CompressionPlugin({
          test: /\.(js|css)?$/i, // 压缩文件类型
          // filename: '[path].gz[query]', // 压缩后的文件名
          algorithm: 'gzip', // 使用 gzip 压缩
          minRatio: 0.8, // 压缩率小于 1 才会压缩
          threshold: 10240, // 对超过 10k 的数据压缩
          deleteOriginalAssets: false // 是否删除未压缩的文件(源文件)，不建议开启
        }),
        new Webpack.ProvidePlugin(providePlugin),
        new WebpackBar({
          name: title
        })
      ]
    }
  },
  chainWebpack(config) { // 接收webpack-chain的ChainableConfig实例，允许对内部的webpack配置进行更细粒度的修改
    config.plugins.delete('preload')
    config.plugins.delete('prefetch')
    // set svg-sprite-loader
    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
    if (imageCompression) {
      config.module
        .rule('images')
        .test(/\.(gif|png|jpe?g)$/i)
        .use('image-webpack-loader')
        .loader('image-webpack-loader')
        .options({
          bypassOnDebug: true
        })
        .end()
    }
    config.when(process.env.NODE_ENV !== 'development', (config) => {
      config.performance.set('hints', false)
      // config.devtool('none')
      config.optimization.splitChunks({
        automaticNameDelimiter: '-',
        chunks: 'all',
        cacheGroups: {
          chunk: {
            name: 'vendors',
            test: /[\\/]node_modules[\\/]/,
            minSize: 131072,
            maxSize: 524288,
            chunks: 'async',
            minChunks: 2,
            priority: 10
          },
          vue: {
            name: 'vue',
            test: /[\\/]node_modules[\\/](vue(.*)|core-js)[\\/]/,
            chunks: 'initial',
            priority: 20
          },
          elementUI: {
            name: 'element-ui',
            test: /[\\/]node_modules[\\/]element-ui(.*)[\\/]/, // in order to adapt to cnpm
            priority: 30// the weight needs to be larger than libs and app or it will be packaged into libs or app
          },
          commons: {
            name: 'chunk-commons',
            test: resolve('src/components'), // can customize your rules
            minChunks: 3, //  minimum common number
            priority: 5,
            reuseExistingChunk: true
          }
        }
      })
    })
  },
  /* css相关配置 */
  css: {
    /* 默认情况下，只有 *.module.[ext] 结尾的文件才会被视作 CSS Modules 模块
    设置为 false 后你就可以去掉文件名中的 .module 并将所有的 *.(css|scss|sass|less|styl(us)?) 文件视为 CSS Modules 模块 */
    // requireModuleExtension: true,
    /* 是否为 CSS 开启 source map */
    sourceMap: false,
    /* 向 CSS 相关的 loader 传递选项 */
    loaderOptions: {
      scss: {
        additionalData(content, loaderContext) {
          const { resourcePath, rootContext } = loaderContext
          const relativePath = path.relative(rootContext, resourcePath)
          if (relativePath.replace(/\\/g, '/') !== 'src/styles/variables.scss') {
            return '@import "~@/styles/variables.scss";' + content
          }
          return content
        }
      }
    }
  }
}