【webpack】chunkFilename详细说明你知道chunkFilename的作⽤吗？
了解之前，先了解懒加载，动态导⼊的功能
let btn = ateElement('button')
btn.innerHTML = '按钮1'
btn.addEventListener('click', () => {
import('./a').then(() => {
console.log('加载完成')
})
})
document.body.appendChild(btn)
点击按钮加载模块的内容，好像Vue的路由分割，好眼熟。
resolve a doi name我的weback.output配置如下：
output: {
path: solve(__dirname, 'dist'),
filename: 'bundle.js',
},
默认导⼊的模块名字是
0.bundle.js
1.bundle.js
这种动态模块
要修改模块的名字就是要chunkFilename
output: {
path: solve(__dirname, 'dist'),
filename: 'bundle.js',
chunkFilename: '[name].min.js'
},
除了这样改名字，还可以通过注释
import(/* webpackChunkName: "video" */ './a').then(() => {
console.log('加载完成')
})
其实动态导⼊还做了⼀些其他优化，⽐如预加载
import(/* webpackPrefetch: true */ './a').then(() => {
console.log('加载完成')
})
prefetch和preload 区别你知道吗？

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。