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 }) => {
  

最后

以上就是感性鱼为你收集整理的webpack5 import动态导入实现按需加载并给文件统一命名的全部内容，希望文章能够帮你解决webpack5 import动态导入实现按需加载并给文件统一命名所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。