Webpack 常用 loader 和 plugin 汇总
基于 Webpack 4 和 Webpack 5
Loader
| 名称 | 描述 |
|---|---|
| eslint-loader |
代码规范检查。eslint-config-airbnb eslint-config-alloy eslint-config-ivweb
|
| babel-loader | |
| postcss-loader | |
| style-loader | |
| css-loader | |
| less-loader | |
| file-loader | |
| url-loader |
和 file-loader 类似。可以将小图片等资源以 base64 方式引用
|
| px2rem-loader |
Plugin
| 名称 | 描述 |
|---|---|
| clean-webpack-plugin | |
| html-webpack-plugin | html 压缩、自动创建 html5 文件、自动引入编译后的 script 等 |
| html-webpack-externals-plugin | 将指定的资源设置成 CDN 等形式的外部引用，减少 bundle 大小 |
| SplitChunksPlugin | 公共脚本分离成公共包，并进行优化。webpack 自带 |
| friendly-errors-webpack-plugin | webpack 构建日志美化插件 |
CSS
| 名称 | 描述 |
|---|---|
| autoprefixer |
自动补全兼容前缀。配合 postcss-loader 使用
|
| mini-css-extract-plugin | 可以将 css 单独打包，支持文件指纹 |
| optimize-css-assets-webpack-plugin |
css 压缩。一般配合 cssnano 使用
|
JS
| 名称 | 描述 |
|---|---|
| webpack-shebang-plugin |
保留文件头部的 #! 等 shebang
|
| uglifyjs-webpack-plugin |
js 压缩。production 模式下自动开启
|
性能相关
| 名称 | 描述 |
|---|---|
| speed-measure-webpack-plugin | 构建速度分析。每个 loader 和 plugin 的耗时 |
| webpack-bundle-analyzer | 包体积分析 |
| parallel-uglify-plugin | 代码并行压缩 |
| uglifyjs-webpack-plugin | 代码压缩，支持并行压缩 |
| terser-webpack-plugin | webpack5 自带的代码压缩插件，支持并行压缩 |
| image-webpack-plugin | 图片处理插件。可以进行图片压缩 |
| purgecss-webpack-plugin |
配合 mini-css-extract-plugin 删除无用的 css
|
静态资源内联
使用 raw-loader
// html 内联
${require('raw-loader!./meta.html')}
// js 内联
<script>${require(raw-loader!babel-loader!../node_modules/lib-flexible)}</script>
CSS 内联
- 使用
style-loader - 使用
html-inline-css-webpack-plugin
Webpack 常用 loader 和 plugin 汇总相关推荐
- webpack常用loader和plugin及打包速度优化
优化 或 也可以用: 备用: 慎用的配置,用的不好会增加打包时间: 代码丑化插件: 更多专业前端知识,请上 [猿2048]www.mk2048.com
- Webpack中Loader和Plugin的区别和编写思路
由于webpack基于发布订阅模式,在运行的生命周期中会广播出许多事件,插件通过监听这些事件,就可以在特定的阶段执行自己的插件任务 一.区别 前面两节我们有提到Loader与Plugin对应的概念,先 ...
- webpack的loader与plugin原理
文章目录 loader原理 loader执行顺序 loader使用方式 loader的实现 参数 同步loader 异步loader Raw loader Pitching loader loader ...
- Webpack自定义Loader和Plugin方法
手写Loader Loader 本质上是导出函数的 JavaScript 模块,而该模块导出的函数被称为 Normal Loader,在开发 Loader时,我们可以在导出的函数上添加一个 pitch ...
- 【前端知识之webpack】Loader和Plugin都是什么，有什么区别
前言 本系列主要整理前端面试中需要掌握的知识点.本节介绍Loader和Plugin都是什么,有什么区别. 文章目录 前言 一.Loader是什么 二.Plugin是什么 三.Loader和Plugin ...
- mysql8出现1045报错+常用的加密plugin汇总
一些准备工作 /etc/mysql/mysql.conf.d/mysqld.cnf 的[mysqld]下面加入skip-grant-tables service mysql restart 然后输入m ...
- webpack实战之手写一个loader和plugin
webpack实战之编写一个简易的loader和plugin
- 24.重学webpack——loader的原理及常用loader的实现（高频面试题）
[重学webpack系列--webpack5.0] 1-15节主要讲webpack的使用,当然,建议结合<webpack学完这些就够了>一起学习. 从本节开始,专攻webpack原理,只有 ...
- [转]WebPack 常用功能介绍
概述 Webpack是一款用户打包前端模块的工具.主要是用来打包在浏览器端使用的javascript的.同时也能转换.捆绑.打包其他的静态资源,包括css.image.font file.templa ...
最新文章
- [译]Godot系列教程一 - 场景与节点
- 光遗传学离诺奖又双叒进一步！10天后谜底将揭晓 （盘点光遗传学近年来获奖记录）...
- 6-4 链表拼接 (20分)_青岛喷绘制作公司不愿透露的喷绘布拼接与安装技巧，建议收藏...
- ubuntu php mysql5.6_Ubuntu 安装 Mysql 5.6 数据库
- pycharm中报错：ImportError: No module named 'skimage'
- 华为V3.4-RIP命令总结
- android自定义dialog不显示,Android 自定义的dialog显示不正常呢，怎么回事？？？
- python模块(6)-Pandas 简易使用教程
- Android系统init进程启动及init.rc全解析
- PostgreSQL 简单的查询
- Random()中具体实现(含种子数组的实现)
- Unity MRTK（三）部署到Hololens模拟器
- 带本信息论看《三体》——信息论课程论文
- FileZilla Server详细配置
- 批量修改联系人头像_视频号pr批量剪辑0基础实操课，pr批量处理伪原创一分钟一个视频【共2节】...
- 西安交大计算机2000年山西专业录取分数,西安交大在山西各专业录取分数.doc
- 解决 Kotlin 换页符提示错误 Illegal escape f 无法使用问题
- python保存文件名，line 257, in urlretrieve tfp = open(filename, ‘wb‘）OSError: [Errno 22] Invalid argument:
- Java设计模式总结——6大设计原则
- 如何跨入AI的大门 Python人工智能方向怎么样