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')
  }
]

結果

顯然設置成功了