阅读 64

webpack 打包笔记

前言

引入前端工程化的必要性:

ES Modules 存在兼容问题 模块文件过多,网络请求频繁 书写时,前端资源需要模块化管理

webpack 与 gulp 区分

gulp

gulp强调的是前端开发流程,它是通过配置一系列的task事务(例如文件压缩合并、雪碧图、启动server、版本控制等),按一定执行顺序,用gulp执行这些task,从而构建整个前端开发流程。

webpack

webpack是一个前端模块化方案,更侧重模块,把开发中所有资源(图片、js、css等)看成模块,通过loader(加载器)和plugins(插件)对资源进行处理,打包成符合生产环境部署的前端资源。

总结

因此,gulp 更强调流程,而 webpack 更强调模块化,文件压缩合并、预处理等只是附带功能。但2者可以结合互补。

loader:webpack 中解决各种模块资源的引入,实现整体项目打包 plugin: 解决除了资源加载以外,其他的自动化工作。例如: 清除 dist 目录,打包压缩文件,拷贝静态文件至输出目录

常用sourceMap: cheap-module-source-map 每行不超过80个字符, 使用框架

webpack 的分模块加载

大多数时候,并不是所有模块都需要加载,因为HTTP1.1中,每个请求头额外的带宽,延迟,并不能对同一个域名下发起很多次并行请求

文章分类
前端
文章标签