对webpack的理解

作用

是一个前端代码打包工具。

打包流程

主要是: 初始化参数,编译,找到入口entry,遍历模块以及它依赖的模块,预处理loader,模块编译,然后根据依赖关系输出到指定的路径和目录下。

模块

loader: 预处理器,对各种文件格式进行处理,转换成webpack能识别的js代码。常见的预处理器有less-loader、postcss-loader、ts-loader。

plugin: 插件,在webpack打包过程中的特定时间对资源进行一些处理,增强webpack的能力。例如打包优化,代码压缩等。常用的插件有clean-webpack-plugin删除上一次打的包。

webpack打包优化

压缩代码、按需加载资源、懒加载、缓存、删除多余的代码(tree-shaking)等

提升webpack构建速度

减少要打包的文件。

loader和plugin的区别

loader下载后直接使用,在编译阶段进行。

plugin下载后需要引用再使用,在整个周期都有效。

相关推荐
Dragon Wu几秒前
React state在setInterval里未获取最新值的问题
前端·javascript·react.js·前端框架
Jinuss1 分钟前
Vue3源码reactivity响应式篇之watch实现
前端·vue3
YU大宗师4 分钟前
React面试题
前端·javascript·react.js
木兮xg5 分钟前
react基础篇
前端·react.js·前端框架
ssshooter29 分钟前
你知道怎么用 pnpm 临时给某个库打补丁吗?
前端·面试·npm
IT利刃出鞘1 小时前
HTML--最简的二级菜单页面
前端·html
yume_sibai1 小时前
HTML HTML基础(4)
前端·html
给月亮点灯|2 小时前
Vue基础知识-Vue集成 Element UI全量引入与按需引入
前端·javascript·vue.js
知识分享小能手2 小时前
React学习教程,从入门到精通,React 组件生命周期详解(适用于 React 16.3+,推荐函数组件 + Hooks)(17)
前端·javascript·vue.js·学习·react.js·前端框架·vue3
面向星辰2 小时前
html音视频和超链接标签,颜色标签
前端·html·音视频