Webpack高级配置「五」-- 懒加载 & 处理JSX & 处理vue ***

本文介绍了前端开发中的懒加载技术,通过动态引入abc.js并在1.5秒后打印数据实现。同时,讲解了如何在.babelrc配置中处理JSX语法,使项目支持React组件。此外,还展示了处理Vue文件的webpack规则,确保.vue文件能够被正确加载和编译。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.懒加载

abc.js 文件中定义数据:

export default {
  message: "this is dynamic data"
}

动态引入数据 - 实现懒加载:

setTimeout(() => {
  import('./abc.js').then(res => {
    console.log(res.message)
  })
}, 1500);

最后产出一个独立的js,等同于定义一个chunk

2.处理JSX

修改 .babelrc 配置为:

"presets": ["@babel/preset-react"],
3.处理vue
rules: [{
  test: /\.vue$/,
  loader: ['vue-loader'],
  include: srcPath
}, ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值