vuecli基本配置学习

const isProd = process.env.NODE_ENV === 'production';

const externals = {
  vue: 'Vue',
  'vue-router': 'VueRouter',
  'axios': 'axios',
  'vuex': 'Vuex',
  'lottie-web':'lottie',
  'better-scroll': 'BetterScroll',
  'swiper/swiper-bundle.min.js':'Swiper'
}

// cdn外链，会插入到index.html中
const cdn = {
  dev: {
    css: [],
    js: []
  },
  build: {
    css: [],
    js: [
      'https://aaa/vue2/vue.min.js',
      'https://aaa/vuerouter/vue-router.min.js',
      'https://aaa/axios/axios.min.js',
      'https://aaa/vuex/vuex.min.js',
      "https://aaa/lottie/lottie.min.js",
      'https://aaa/bScroll/better-scroll.min.js',
      'https://aaa/swiper/swiper-bundle.min.js',
      
    ]
  }
}

module.exports = {
  publicPath: "./",
  lintOnSave: false,
  // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建
  productionSourceMap: false,
  css: {
    loaderOptions: {
      postcss: {
        plugins: [postcss],
      },
    },
  },
  configureWebpack: config => {
    if (isProd) {
      config.externals = externals              // 设置externals 将第三方插件以script标签的形式插入index.html 不打包 减小打包体积
      config.optimization.usedExports = true,   // 开启treeshaking  结合package.json中设置 sideEffects 属性，设置无副作用文件
      config.plugins.push(
        new ImageminWebpWebpackPlugin({       //将图片转换为webp格式文件  结合v-webp指令使用
          config: [
            {
              test: /\.(jpe?g|png)/,
              options: {
                quality: 95
              }
            }
          ],
          overrideExtension: false
        })
      )
      config.plugins.push(
        // Webpack完成捆绑过程后要执行的命令：删除dist目录下ignore目录，prod-md5-zip目录
        new FileManagerPlugin({
          onEnd: [{
            delete: [
              `./dist/ignore`,
              './prod-md5-zip'
            ]
          }]
        })
      )
    }
    //开启gzip
    // 如果开启gzip压缩，在http请求中，也可以看到响应头多了Content-Encoding: gzip
    // 开启gzip压缩以后，对应压缩文件中就会多了.gz的文件
    // 后端配置nginx gzip对应配置 开启使用
    config.plugins.push(
      new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
        threshold: 10240,  //只有大于该值的资源会被压缩
        minRatio: 0.8
      })
    )
    // 单个asset静态资源文件的大小最大为409600B==>400KB,超过400KB则会给出警告
    config.performance = {
      maxAssetSize: 1024 * 400
    }


  },
  //链式调用 是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改
  chainWebpack: config => {
    // 就是当首屏加载的时候，会一次性下载完所以的路由文件，这会导致首屏的时候请求内容变多，首屏加载变慢，删除无用的插件，避免加载多余的资源
      // 移除 prefetch 插件      
      config.plugins.delete('prefetch')      
      // 移除 preload 插件      
      config.plugins.delete('preload');
  
    if (process.env.IS_ANALYZ) {
      config.plugin('webpack-report').use(BundleAnalyzerPlugin, [
        {
          analyzerMode: 'static'
        }
      ])
    }
    // svg rule loader
    const svgRule = config.module.rule('svg') // 找到svg-loader
    svgRule.uses.clear() // 清除已有的loader, 如果不这样做会添加在此loader之后
    svgRule.exclude.add(/node_modules/) // 正则匹配排除node_modules目录
    svgRule // 添加svg新的loader处理
      .test(/\.svg$/)
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })


    config
      .plugin('html')
      .tap(args => {
        args[0].title = projectConfig.title
        if (isProd) {
          args[0].cdn = cdn.build
        }
        return args
      })
      // 公共代码抽离，公共代码只需要下载一次就缓存起来了，避免了重复下载

      config.optimization.splitChunks({     //分割代码块
        chunks: "all",  //webapck的splitChunks默认只对按需加载的模块起作用,可通过改变该属性修改默认行为，可选的值：'async': 异步，即按需加载的模块。'all': 所有的模块，包括同步和异步。'initial': 初始加载的模块即同步模块。
        minSize: 20000,  // 文件最小大小,单位bite;即超过minSize有可能被分割；
        minChunks: 2,  //module至少被多少chunk引用才会生成新chunk。
        maxAsyncRequests: 30,  //限制异步模块内部的并行最大请求数的
        maxInitialRequests: 30,  //允许入口并行加载的最大请求数
        enforceSizeThreshold: 50000,
        maxSize: 0,
        cacheGroups: {   默认为vendors和default。可以设置权重值priority。
                       vendor一般放置node_modules里面的文件, default放置公共组件
          // 单独抽离antv为一个打包文件
          antv: {
              name: 'chunk-antv',
              priority: 20,
              test: /[\\/]node_modules[\\/]_?@antv(.*)/,
          },
          //第三方依赖
          vendor: {
              priority: 1, //优先级，一个module可能被多个chunk引用，会被打包到优先级高的chunk里。
              name: 'vendor',
              test: /node_modules/,
              chunks: 'initial',
              minSize: 0,
              minChunks: 1  //module至少被多少chunk引用才会生成新chunk。
          },
          //缓存组
          common: {
              //公共模块
              chunks: 'initial',
              name: 'common',
              minSize: 100, //大小超过100个字节
              minChunks: 3, //最少引入了3次
              enforce: true //强制分包
          },
          // monaco库
          monaco: {
            chunks: "all",
            name: "chunk-monaco",
            priority: 4,
            test: /monaco-editor/,
            enforce: true,
            reuseExistingChunk: true,
          },
      }
      });
  },
  devServer: {
    disableHostCheck: true,
    proxy: {
      "/h5": {
        target: "http://bbbn.com.cn", // 后台接口域名
        ws: true, //如果要代理 websockets，配置这个参数
        secure: true, // 如果是https接口，需要配置这个参数
        changeOrigin: true, //是否跨域
      },
    
    },
  },
}
`