Webpack中的loader,plugin

参考几篇文章后简单整理、

 1 . loader运行在打包文件之前（loader为在模块加载时的预处理文件）  2.  plugins在整个编译周期都起作用。

1.loader从本质上来说其实就是一个node模块。相当于一台榨汁机(loader)将相关类型的文件代码(code)给它。根据我们设置的规则，经过它的一系列加工后还给我们加工好的果汁(code)。在Webpack中，一切皆模块，我们常见的Javascript、CSS、Less、Typescript、Jsx、图片等文件都是模块，不同模块的加载是通过模块加载器来统一管理的，当我们需要使用不同的 Loader 来解析不同类型的文件时，我们可以在module.rules字段下配置相关规则。

loader编写原则

• 单一原则: 每个 Loader 只做一件事；
• 链式调用: Webpack 会按顺序链式调用每个 Loader；
• 统一原则: 遵循 Webpack 制定的设计规则和结构，输入与输出均为字符串，各个 Loader 完全独立，即插即用；

常见loader

1. file-loader: 文件加载
2. url-loader： 文件加载，可以设置阈值，小于时把文件base64编码
3. image-loader: 加载并压缩图片
4. babel-loader： ES6+转成ES5
5. ts-loader: 将ts转成js
6. css-loader：处理@import和url这样的外部资源
7. style-loader： 在head创建style标签把样式插入
8. . postcss-loader: 扩展css语法，使用postcss各种插件autoprefixer，cssnext，cssnano

---

2.在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过Webpack提供的API改变输出结果。通俗来说：一盘美味的  菜品·需要经历烧油 炒制 调味到最后的装盘等过程，而plugin相当于可以监控每个环节并进行操作，比如可以写一个少放胡椒粉plugin,监控webpack暴露出的生命周期事件(调味)，在调味的时候执行少放胡椒粉操作。那么它与loader的区别是什么呢？上面我们也提到了loader的单一原则,loader只能一件事，比如说less-loader,只能解析less文件，plugin则是针对整个流程执行广泛的任务。

Webpack 就像一条生产线，要经过一系列处理流程后才能将源文件转换成输出结果。 这条生产线上的每个处理流程的职责都是单一的，多个流程之间有存在依赖关系，只有完成当前处理后才能交给下一个流程去处理。 插件就像是一个插入到生产线中的一个功能，在特定的时机对生产线上的资源做处理。

• ignore-plugin：忽略文件
• mini-css-extract-plugin: 分离样式文件，css提取为独立文件，支持按需加载
• clean-webpack-plugin: 目录清理
• html-webpack-plugin可以根据模板自动生成html代码，并自动引用css和js文件
• extract-text-webpack-plugin将js文件中引用的样式单独抽离成css文件
• DefinePlugin编译时配置全局变量，这对开发模式和发布模式的构建允许不同的行为非常有用
• HotModuleReplacementPlugin热更新
• optimize-css-assets-webpack-plugin不同组件中重复的css可以快速去重

 

---

链接：https://juejin.cn/post/6873360407604822029
链接：https://juejin.cn/post/7067051380803895310
参考链接：https://juejin.cn/post/6844904031240863758