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

preface

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

遇到了 chunkfilename name 配置后不生效

之前配置

webpack ^2.6.1
webpack 配置

1
2
3
4
5
6

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

路由配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

/**
* 优惠券路由
*/

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 引入方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

/**
* 优惠券路由
*/

/**
* 优惠券路由
*/

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

结果

显然设置成功了