webpack chunkFilename设置name后不生效，id 生效

深藏阁楼爱情的钟 2023-02-17 05:18 43阅读 0赞

## preface ##

最近又开启新项目了，以之前的某个项目为基础搭建， 我进行了优化。

遇到了 chunkfilename name 配置后不生效

## 之前配置 ##

*  webpack ^2.6.1
 *  webpack 配置

output: {
        
        path: config.build.assetsRoot,
        filename: utils.assetsPath('js/[name].[chunkhash].js'),
        chunkFilename: utils.assetsPath('js/[name].[chunkhash].js')
        // chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
      },

*  路由配置

/**
     * 优惠券路由
     */
    
    export default [
      {
        
        path: 'channel-manage',
        name: 'CouponChannelManage',
        meta: {
        
          title: '渠道管理',
          perm: 'channel:manage'
        },
        component: () => import( /* webpackChunkName="my-chunk-name" */ '@/pages/app/Coupon/ChannelManage')
      },
      {
        
        path: 'recharge-pkg', name: 'CouponRechargePackage',
        meta: {
        
          title: '充值套餐',
          perm: 'recharge:pkg'
        },
        component: () => import( /* webpackChunkName="my-chunk-name" */ '../../src/pages/app/Coupon/RechargePackage')
      },
      {
        
        path: 'recharge-record',
        name: 'CouponRechargeRecord',
        meta: {
        
          title: '充值记录',
          perm: 'recharge:record'
        },
        component: () => import( /* webpackChunkName="my-chunk-name" */ '@/pages/app/Coupon/RechargeRecord')
      },
      {
        
        path: 'distribute-rcd',
        name: 'CouponDistributeRecord',
        meta: {
        
          title: '发放记录',
          perm: 'distribute:rcd'
        },
        component: () => import( /* webpackChunkName="my-chunk-name" */ '@/pages/app/Coupon/DistributeRecord')
      },
    
    ]

## 现象 ##

> 显然 chunkfilename 设置没有生效  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbG1lcl9rYWk_size_16_color_FFFFFF_t_70]

## 解决方案 ##

> 原因没找到，  
> 把引入方式 修改为 require.ensure 方式即可  
> 有网友说 @ alias 引起的问题， 但是我尝试了使用 相对路径没有解决问题

语法： `require.ensure(dependencies: String[], callback: function(require), chunkName: String)`

修改 router 引入方式

/**
     * 优惠券路由
     */
    
    /**
     * 优惠券路由
     */
    
    export default [
      {
        
        path: 'channel-manage',
        name: 'CouponChannelManage',
        meta: {
        
          title: '渠道管理',
          perm: 'channel:manage'
        },
        component: r => require.ensure([], function (require) {
        
          r(require('@/pages/app/Coupon/ChannelManage'))
        }, 'coupon')
      },
      {
        
        path: 'recharge-pkg', name: 'CouponRechargePackage',
        meta: {
        
          title: '充值套餐',
          perm: 'recharge:pkg'
        },
        component: r => require.ensure([], function (require) {
        
          r(require('@/pages/app/Coupon/RechargePackage'))
        }, 'coupon')
      },
      {
        
        path: 'recharge-record',
        name: 'CouponRechargeRecord',
        meta: {
        
          title: '充值记录',
          perm: 'recharge:record'
        },
        component: r => require.ensure([], function (require) {
        
          r(require('@/pages/app/Coupon/RechargeRecord'))
        }, 'coupon')
      },
      {
        
        path: 'distribute-rcd',
        name: 'CouponDistributeRecord',
        meta: {
        
          title: '发放记录',
          perm: 'distribute:rcd'
        },
        component: r => require.ensure([], function (require) {
        
          r(require('@/pages/app/Coupon/DistributeRecord'))
        }, 'coupon')
      }
    ]

## 结果 ##

> 显然设置成功了  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbG1lcl9rYWk_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbG1lcl9rYWk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200612165634891.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbG1lcl9rYWk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbG1lcl9rYWk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200612170441886.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbG1lcl9rYWk=,size_16,color_FFFFFF,t_70