webpack5 import动态导入实现按需加载并给文件统一命名

想要实现按需加载，动态导入模块。还需要额外配置：

console.log("hello main");
 
document.getElementById("btn").onClick = function () {
   // 动态导入 --> 实现按需加载  -->then是加载成功要做的处理不处理的话可以不写
 
  import( "./js/math.js").then(({ count }) => {
    console.log(count(2, 1));
  });
};

效果:

 如果没有配置命名规则打包后就是这样的随机

1. 修改文件

• main.js

  console.log("hello main");
   
  document.getElementById("btn").onClick = function () {
     // 动态导入 --> 实现按需加载  -->then是加载成功要做的处理不处理的话可以不写
    // eslint会对动态导入语法报错，需要修改eslint配置文件
    // webpackChunkName: "math"：这是webpack动态导入模块命名的方式
    // "math"将来就会作为[name]的值显示。
    import(/* webpackChunkName: "math" */ "./js/math.js").then(({ count }) => {