初始化+安装
npm init -y
npm i webpack webpack-cli html-webpack-plugin -D
![](https://i-blog.csdnimg.cn/blog_migrate/67a039dae1ca4ab22c0d14b1a2ebfca2.png)
![](https://i-blog.csdnimg.cn/blog_migrate/f89667a4c789c7cbc276cd7c7a028d6b.png)
![](https://i-blog.csdnimg.cn/blog_migrate/786476b3cbb43faa1df5b29b408b9c28.png)
![](https://i-blog.csdnimg.cn/blog_migrate/46647e44b202afae5ccb131e9caf5745.png)
![](https://i-blog.csdnimg.cn/blog_migrate/7a635ab2429ff0da0c62abab6da02d46.png)
![](https://i-blog.csdnimg.cn/blog_migrate/9f0e91c988a8054ca45c56c29866f738.png)
运行打包:
npx webpack
发现 一上来3个js文件都加载了
![](https://i-blog.csdnimg.cn/blog_migrate/1aad02ab4e7ae8af81a8fba35682d116.png)
我们希望一开始不这样加载 ,点击的时候才加载
想要实现按需加载,动态导入模块。还需要额外配置:
![](https://i-blog.csdnimg.cn/blog_migrate/31060f62755b38e4c4d7897783452730.png)
import { sum } from './math'
console.log('hello main')
console.log(sum(1, 5, 5))
document.getElementById('btn').onclick = function () {
document.getElementById("btn").onclick = function () {
// 动态导入 --> 实现按需加载
// 即使只被引用了一次,也会代码分割
import("./count")
.then((res) => {
console.log('模块加载成功',res)
})
.catch((err) => {
console.log('模块加载失败',err)
});
};
}
一上来加载
![](https://i-blog.csdnimg.cn/blog_migrate/614906d7e6cea8a289ee17f497d6b042.png)
点击按钮加载
![](https://i-blog.csdnimg.cn/blog_migrate/81cccf15242ecbb0eed8ab44ca4ba674.png)
![](https://i-blog.csdnimg.cn/blog_migrate/ed6a853afa2b02be64a8c2f38d8f88eb.png)
如何想要运行代码,由于是默认暴露,函数在default里面
import { sum } from './math'
console.log('hello main')
console.log(sum(1, 5, 5))
document.getElementById('btn').onclick = function () {
document.getElementById("btn").onclick = function () {
// 动态导入 --> 实现按需加载
// 即使只被引用了一次,也会代码分割
import("./count")
.then((res) => {
console.log('模块加载成功',res.default(2,5))
})
.catch((err) => {
console.log('模块加载失败',err)
});
};
}
![](https://i-blog.csdnimg.cn/blog_migrate/0cac3c8b49ba3752b41dce54bad706cb.png)