webpackChunkName与webpackPrefetch作用

webpackChunkName
import 中添加注释们可以进行诸如给 chunk 命名或选择不同模式的操作。只有当调用模块导入的情况下触发
https://webpack.docschina.org/api/module-methods/#dynamic-expressions-in-import

import(/* webpackChunkName: 'test'*/'./test')

&
test.js

export function add(x, y) {
  return x + y;
}

引入test.js模块

document.getElementById('Button').onclick = function() {
import(/* webpackChunkName: 'test'*/'./test').then(({ add}) => {
    console.log(add(8, 8));
  });
}

webpackPrefetch
import中预获取/预加载模块
https://webpack.docschina.org/guides/code-splitting/#prefetchingpreloading-modules

import(/* webpackPrefetch: true */ './LoginModal.js');//注意有兼容性问题

两个结合一起用

document.getElementById('Button').onclick = function() {
import(/* webpackChunkName: 'test', webpackPrefetch: true */'./test').then(({ add }) => {
    console.log(add(8, 8));
  });
}

以上是在优化项目中用到比较多

特殊情况下，如不想通过entry多入口打包
import动态导入语法：可以将某个文件单独打包，如下test被单独打包

import(/* webpackChunkName: 'test' */'./test')
  .then(({ way, count }) => { 
    console.log(成功！);
  })
  .catch(() => { 
    console.log('文件加载失败~');
  });