qiaobi/vue.config.js

const path = require('path')
const CompressionPlugin = require("compression-webpack-plugin");

function resolve(dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
  lintOnSave: false,
  productionSourceMap: false,
  assetsDir: 'assets',
  // filenameHashing: false,
  // configureWebpack: () => {
  //   if (process.env.NODE_ENV === 'production') {
  //     return {
  //       plugins: [
  //         new CompressionPlugin({
  //           test: /\.js$|\.html$|\.css$|\.jpg$|\.jpeg$|\.png/,
  //           threshold: 10240,
  //           deleteOriginalAssets: false
  //         })
  //       ]
  //     }
  //   }
  // },
  chainWebpack: config => {
    config.plugin('html')
      .tap(args => {
        args[0].title = '窍笔'
        // args[0].inlineSource = '(\.css|\.js$)'
        return args
      })
    // config.plugin('inline-source')
    //   .use(require('html-webpack-inline-source-plugin'))
    config.plugins
      .delete('prefetch')
      .delete('preload')
    if (process.env.NODE_ENV === 'production') {
      // config.plugins.delete('html')
    }
    config.resolve.alias
      .set('@', path.join(__dirname, 'src'))
    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()
    config
      .when(process.env.NODE_ENV !== 'development',
        config => {
          config
            .plugin('ScriptExtHtmlWebpackPlugin')
            .after('html')
            .use('script-ext-html-webpack-plugin', [{
              // `runtime` must same as runtimeChunk name. default is `runtime`
              inline: /runtime\..*\.js$/
            }])
            .end()
          config
            .optimization.splitChunks({
            chunks: 'all',
            minSize: 20000, // 允许新拆出 chunk 的最小体积，也是异步 chunk 公共模块的强制拆分体积
            maxAsyncRequests: 6, // 每个异步加载模块最多能被拆分的数量
            maxInitialRequests: 6, // 每个入口和它的同步依赖最多能被拆分的数量
            enforceSizeThreshold: 50000, // 强制执行拆分的体积阈值并忽略其他限制
            cacheGroups: {
              vue: {
                name: 'vue',
                test: /[\\/]node_modules[\\/]_?vue(.*)/,
                priority: 10,
              },
              elementUI: {
                name: 'element-ui', // split elementUI into a single package
                test: /[\\/]node_modules[\\/]_?element-ui(.*)/, // in order to adapt to cnpm
                priority: 20 // the weight needs to be larger than libs and app or it will be packaged into libs or app
              },
              echarts: {
                name: 'echarts',
                test: /[\\/]node_modules[\\/]_?echarts(.*)/,
                priority: 30,
              },
              vendors: {
                name: 'vendors',
                test: /[\\/]node_modules[\\/]/,
                priority: -10,
                chunks: 'initial' // only package third parties that are initially dependent
              },
            }
          })
          config.optimization.runtimeChunk('single')
        }
      )
  },
  devServer: {
    before:require('./mock/index.js'),
    port: 8087,
    overlay: {
      warnings: false,
      errors: false
    },
    proxy: {
      '/permission': {
        // target: 'http://192.168.2.122:8880',
        target: 'http://47.116.194.135:8085',
        ws: true,
        changeOrigin: true,
        pathRewrite:{
          '/api':''
        }
      },
    }
  }
}