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

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 设置没有生效

解决方案

原因没找到，
把引入方式 修改为 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')
  }
]

结果

显然设置成功了