vue项目打包分包和加hash值

vue项目打包分包和加hash值

const { defineConfig } = require('@vue/cli-service')
const path = require('path');

const HtmlWebpackPlugin = require("html-webpack-plugin")

function resolve(dir) { // 拿到文件的函数
  return path.join(__dirname, dir);// 将当前文件和dir参数的路径自动合并成为正确的路径
}


module.exports = defineConfig({
  // filenameHashing: true, // 打包后为文件名增加hash值
  // chainWebpack: config => {
  //   config.output.filename('js/[name].[hash].js').end()
 
  //   // 如果filenameHashing设置为了false，可以通过这段代码给打包出的css文件增加hash值
  //   // config.plugin('extract-css').tap(args => [{
  //   //   filename: 'assets/css/[name].[hash].css',
  //   //   chunkFilename: 'assets/css/[name].[hash].css'
  //   // }])
  // },
  filenameHashing: true, // 打包后为文件名增加hash值
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@', resolve('./src'))
      .set('components', resolve('./src/components'))
      .set('views', resolve('./src/views'))
      .set('assets', resolve('./src/assets'))
      .set('dictionary', resolve('./src/dictionary'))
      .set('hooks', resolve('./src/utils/hooks'))
      //set第一个参数：设置的别名，第二个参数：设置的路径
    config.output.filename('js/[name].[hash].js').end()

  },
  transpileDependencies: true,
  //productionSourceMap: true, //开启代码映射
  devServer: {
    // port: '8080', // 设置端口号
    proxy: {
      '/api': {
        target: 'http://47.98.143.143:8080', //API服务器的地址
        //target: 'http://192.168.31.89:8080',
        ws: true, //代理websockets
        changeOrigin: true, // 是否跨域，虚拟的站点需要更管origin
        pathRewrite: {
          // '^/api'是一个正则表达式，表示要匹配请求的url中，全部'http://localhost:8081/api' 转接为 http://localhost:8081/
          '^/api': '',
        }
      }
    },
  },
  configureWebpack: config => {
    return {
      // 看这里：把chunk-vendors.js进行分包，提升资源加载速度，很有必要
      optimization: {
        /**
         * runtimeChunk可选值有：true或'multiple'或'single'
         * true或'multiple'会有每个入口对应的chunk。不过一般情况下
         * 考虑到要模块初始化，设置为single就够多数情况下使用啦。
         * 详情见官网：https://webpack.docschina.org/configuration/optimization/#optimizationruntimechunk
         * */
        runtimeChunk: 'single',
        /**
         * 以前是CommonsChunkPlugin，现在换成optimization.splitChunks。普通项目下方的配置就足够用啦
         * 详情见官网：https://webpack.docschina.org/configuration/optimization/#optimizationsplitchunks
         * */
        splitChunks: {
          chunks: 'all', // 可选值：all，async 和 initial。all功能最强大，所以咱们就使用all
          maxInitialRequests: Infinity, // 最大并行请求数，为了以防万一，设置无穷大即可
          minSize: 200000, // 引入的模块大于20kb才做代码分割，官方默认20000，这里不用修改了
          maxSize: 600000, // 若引入的模块大于60kb，则告诉webpack尝试再进行拆分
          cacheGroups: {
            vendors: {
              test: /[\\/]node_modules[\\/]/, // 使用正则匹配node_modules中引入的模块
              priority: -10, // 优先级值越大优先级越高，默认-10，不用修改
              name(module) { // 设定分包以后的文件模块名字，按照包名字替换拼接一下
                const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
                return `npm.${packageName.replace('@', '')}`
              },
            },
          },
        }
      },
      externals: {
        /**
         * 这里采用Object的形式
         * 更多的形式参考(https://webpack.js.org/configuration/externals/#src/components/Sidebar/Sidebar.jsx)
         * key: 依赖包的名字
         * value: 依赖包挂载在项目中的变量名
         * 挂载的变量必须与依赖包中挂载的一样，在项目中使用也是这个变量名
         */
          'vue': 'Vue',
          'vue-router': 'VueRouter',
          'element-ui': 'ELEMENT',
          'axios': 'axios',
          // 'echarts': 'echarts'
        }
    }
  },

})

externals 打包忽略的依赖，自己在index.html 引入cdn方式优化速度。

optimization 内就是分包配置，依赖的第三方库比如element ui modules里的依赖 分为最大最小区间

config.output.filename(‘js/[name].[hash].js’).end() 打包文件增加hash值，不让浏览器缓存。