【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 区别你知道吗？

了解一下