webpack

本文深入探讨了Webpack如何通过一切皆模块的理念实现高效资源管理和按需加载,详细介绍了css-loader和style-loader的工作流程,并展示了其在Vue单文件组件中的应用。

webpack核心原理

  • 一切皆模块
  • 事物(业务)分割成更小的易于管理的片段,从而达到重复利用等的目的
  • 按需加载:传统的模块打包工具(module bundlers)最终将所有的模块编译生成一个庞大的bundle.js文件。但是在真实的app里边,“bundle.js”文件可能有10M到15M之大可能会导致应用一直处于加载中状态。因此Webpack使用许多特性来分割代码然后生成多个“bundle”文件,而且异步加载部分代码以实现按需加载。
  • https://segmentfault.com/a/1190000005089993
    1. css-loader加载所有的css文件以及css自身的依赖(如,@import 其他css)到JSON对象里,Webpack然后将处理结果传给“style-loader”

    2. style-loader接受JSON值然后添加一个style标签并将其内嵌到html文件

  • 自动分块打包并按需加载、对图片资源引用的自动定位、根据图片大小决定是否用base64内联、开发时的模块热替换
  • 使我们能用这样的单文件格式 (*.vue) 来书写Vue组件

转载于:https://www.cnblogs.com/tangwaikei/p/5542262.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值