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

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

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

效果:

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

1. 修改文件

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

这篇好文章是转载于：学新通技术网