【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 區別你知道嗎？

了解一下