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

183 阅读 0 评论 121 点赞

我是靠谱客的博主感性鱼，这篇文章主要介绍webpack5 import动态导入实现按需加载并给文件统一命名，现在分享给大家，希望可以做个参考。

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

console.log("hello main");

document.getElementById("btn").onClick = function () {
   // 动态导入 --> 实现按需加载  -->then是加载成功要做的处理不处理的话可以不写

  import( "./js/math.js").then(({ count }) => {
    console.log(count(2, 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 }) => {