【webpack】chunkFilename详细说明
你知道chunkFilename的作用吗?
了解之前,先了解懒加载,动态导入的功能
let btn = document.createElement('button') btn.innerHTML = '按钮1' btn.addEventListener('click', () => { import('./a').then(() => { console.log('加载完成') }) }) document.body.appendChild(btn)
点击按钮加载模块的内容,好像Vue的路由分割,好眼熟。
我的weback.output配置如下:
output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', },
默认导入的模块名字是
0.bundle.js
1.bundle.js
这种动态模块
要修改模块的名字就是要chunkFilename
output: { path: path.resolve(__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 区别你知道吗?