浅谈webpack中的loader和plugin
date
Sep 19, 2023
slug
webpack_loader_and_plugin
status
Published
tags
webpack
interview
前端
frontend
summary
webpack是非常非常重要的前端工程化工具。本文主要介绍webpack中的loader和plugin
type
Post
loader VS plugin
loader本质是一个函数。webpack只能理解js或json，打包的时候html或者css需要loader去处理转译成能够被webpack理解的模块，这个过程发生在bundle生成之前或者生成过程当中。在modules.rules中配置。
plugin基于事件流框架tapable。在webpack运行的生命周期中会广播出许多事件，plugin可以监听这些事件，在合适的时机通过webpack提供的api改变输出结果，在plugins中单独配置。
常见的loader
- source-map-loader：加载额外的sourcemap，方便断点调试
- babel-loader：把es6转换成es5
- ts-loader，css-loader，image- loade，json-loader
常见的plugin
- terser-webpack-plugin：支持压缩es6
- define-plugin：定义环境变量
- webpack-parallel-uglify-plugin：多进程执行代码压缩
- mini-css-extract-plugin：分离样式文件，css提取为独立文件，支持按需加载
- speed-measure-webpack-plugin： 可以看到每个loader和plugin执行耗时
- webpack-bundle-analyzer：可视化webpack输出文件的体积