webpack loader plugin

丁成弘

2023-12-01

一、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()
]
...

超详细webpack的plugin讲解，看不懂算我输，案例>原理>实践_馒头老爸的博客-CSDN博客_webpack的plugin

常见的Loader和Plugin

loader：

style-loader ：在html文件中创建<style>标签，将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 webpack5之后处理资源_Jookerone的博客-CSDN博客_webpack5 资源模块）

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代码,加快构建速度