一文详解webpack中loader与plugin的区别

一、Loader

1.loader的作用：

webpack 只能直接处理 javascript 格式的代码。任何非 js 文件都必须被预先处理转换为 js 代码，才可以参与打包。loader（加载器）就是这样一个代码转换器。

2.loader的工作原理：

它由 webpack 的 loader runner 执行调用，接收原始资源数据作为参数（当多个加载器联合使用时，上一个loader的结果会传入下一个loader），最终输出 javascript 代码（和可选的 source map）给 webpack 做进一步编译。

3. Loader 执行顺序

1). loader类型

pre：前置loader normal：普通loader inline：内联loader post：后置loader

2). 执行优先级

4类 loader 的执行优级为：pre > normal > inline > post 。相同优先级的 loader 执行顺序为：从右到左，从下到上。 3. 前缀的作用

内联 loader 可以通过添加不同前缀，跳过其他类型 loader。

! 跳过 normal loader。 -! 跳过 pre 和 normal loader。 !! 跳过 pre、 normal 和 post loader。这些前缀在很多场景下非常有用。

4.如何开发一个loader

loader 是一个导出一个函数的 node 模块。

1). 最简单的 loader

当只有一个 loader 应用于资源文件时，它接收源码作为参数，输出转换后的 js 代码。

// loaders/simple-loader.js module.exports = function loader (source) { console.log('simple-loader is working'); return source; } 揭秘webpack loader - 知乎

style-loader 最终需返回一个 js 脚本：在脚本中创建一个 style 标签，将 css 代码赋给 style 标签，再将这个 style 标签插入 html 的 head 中。

二、Plugin

1.plugin解决其他的更多的自动化打包工作

plugin的范围更大，作用也更强。

可以自动打包生成html文件，并自动引入打包后的结果打包前清除原dist文件中的内容可以将我们需要的但是并没有引入静态资源一同打包到dist文件中对打包的结果进行特殊的处理压缩打包后的内容，对打包结果可以进行更细的自定义操作

2.自定义插件

1）在造轮子之前我们必须要知道它的原理，plugin相比loader还有一点很大的不同，loader只工作于模块的加载环节，而plugin即可可以作用于打包过程的每一个环节，有点像vue中的生命周期，我们可以在一个合适的周期进行相应的操作。webpack的插件机制就是我们常说的钩子机制，整个打包过程可以分为多个环节，为了便于插件的扩展，webpack机会在每个环节都提供了一个钩子，我们就可以利用这些钩子来造轮子。

2）webpack为我们提供了哪些hooks呢?

entry-option 初始化 option run 开始编译 compile 真正开始的编译，在创建 compilation 对象之前 compilation 生成好了 compilation 对象 make 从 entry 开始递归分析依赖，准备对每个模块进行 build after-compile 编译 build 过程结束 emit 在将内存中 assets 内容写到磁盘文件夹之前 after-emit 在将内存中 assets 内容写到磁盘文件夹之后 done 完成所有的编译过程 failed 编译失败的时候 …

3）webpack要求我们的插件必须是一个函数，或者是一个包含apply的对象。一般来说我们都会定义一个类型，然后在这个类型中定义apply方法，最后再通过这个类型来创建一个实例对象去使用这个插件。

const pluginName = 'myplugin'
module.exports = class myplugin {
 apply(){}
}

这个apply方法接收一个叫compiler的参数对象，这个对象是webpack工作中最核心的对象，包含了此次打包构建的所有配置信息，我们就可以通过这个对象去注册钩子函数。

const pluginName = 'myplugin'
module.exports = class myplugin {
 apply(compiler){
 compiler.hooks.run.tap(pluginName, () =>{
 {
 console.log('开始编译');
 }
 })
 }
}

我们想在run阶段输出‘开始编译’这句话，在webpack.config.js中引入并配置

const myplugin = require('./myplugin')
plugins:[
 new myplugin()
]

常见的Loader和Plugin

loader：

style-loader ：在html文件中创建标签，将js中的样式插入

css-loader：将css文件变成commonjs模块加载到js中，输出为样式字符串

less-loader：将less转换为css

url-loader+内置file-loader：处理图片资源（不能处理html中的图片）

html-loader：处理html中的图片，负责引入img从而能被url-loader处理

{
 test: /\.(jpg|png|gif)$/,
 use: {
 loader: 'url-loader',
 options:{
 limit:5*1024,
 esModule: false，
 name:[hash:10].[ext] //给图片文件重命名，取哈希值前10位加上原来的扩展名
 }
 },
 type:'javascript/auto' //在webpack4的基础上加上这句话
 },
{
 test: /\.(htm|html)$/,
 loader: 'html-loader',
}

file-loader：打包其他资源，如字体图标，不需要优化压缩

（webpack5之后，我们可以直接使用资源模块类型（asset module type）,来替代上面的这些loader）

plugin:

html-webpack-plugin：在build中新建一个index.html文件，自动引入打包输出的所有资源（js/css）.可以配置 template为新html文件创建模板

ignore-plugin:用来忽略一些文件

mini-css-extract-plugin：将css单独打包成一个文件的css

clean-webpack-plugin：用于清除目录文件,在生产环境中编译文件的时候,用它来讲dist的目录清除干净,然后再生成新的

serviceworker-webpack-plugin：离线缓存功能

webpack-parallel-uglify-plugin：多线程压缩js代码,加快构建速度

目录