【Vue五分钟】 五分钟了解Webpack底层原理以及脚手架工具分析

📑博客主页：@丘比特惩罚陆

💖欢迎关注：点赞收藏⭐留言✒
💬系列专栏：web前端、嵌入式、笔记专栏
🎮 加入社区： 灌水乐园
🥇人生格言：选对方向，每走一步都是进步！
✒️欢迎大佬指正，一起学习！一起加油！

👏 希望大家能小手一动，帮忙点个赞！

😁资源邮箱：2237814512@qq.com；微信：lss0901lili1130

目录

 1.如何编写一个Loader(一)

2.如何编写一个Loader（2）

3.如何编写一个Plugin

---

 1.如何编写一个Loader(一)

当我们打包一个类型文件 / 模块时 loader 就会起作用。 通过 npm init 初始化，并且安装好 webpack 相关包，简单配置一下。

const path = require( 'path;
module.exports = {
mode: 'development',
entry: {
main: './src/index.js'},
output: {
path: path.resolve(_dirname, 'dist ' ),filename: '[name] . js'
}

我们实现这么一个 loader ，如果引入一个 js 文件，看到一个 dell 字符串就改成 dell li 。

其实 loader 就是返回一个函数（不能箭头函数，因为需要用 到 this ，避免指向问题），可以接受参数 source （即引入文件的内容）。

module.exports = function(source) {
return source.replace( 'dell', 'dellLee ' );}

如此即可完成一个 loader ，回到 config 配置就行，注意引入的时候需要以路径形式写，不能直接写一个名字。

module: {
rules:[{
test:/\js/ ,
use: [
path.resolve(__dirname, './loaders/ replaceLoader.
]
}

Use 可以通过 options 传递参数， loader 通过 this.query 可以 获取参数。

use: [
{
loader: path.resolve(_ dirname,'./loaders/ repl.options:{
name: 'lee'}
}

module.exports = function(source){
return source.replace( 'dell', this.query.name);上

具体可以参考官网的 API 。 为了更好的获取参数可以采用官方的插件.

const loaderUtils = require( ' loader-utils' );module.exports = function(source) {
const options = loaderUtils.getOptions (this);return source.replace( 'dell', options.name);}

要是想往外抛出点什么可以通过 this.callback 方法。

this.callback(null,result)1

---

2.如何编写一个Loader（2）

如何在 loader 中执行异步代码呢，可以通过 this.async 方法声明一下，然后调用该方法返回结果。

const loaderUtils = require( 'loader-utils' );
module.exports = function(source) {
const options = loaderUtils.get0ptions(this);
const callback = this.async();
setTimeout(=>{
const result = source.replace( 'dell', options.name);
callback( result);
},1000);
}

而该方法返回的其实就是 this.callback 方法。那怎么使用多个 loader ？这个就在 use 中使用多个就行了， 同异步可以一起使用。 为了避免一直都是写路径，可以给 loader 配个查找范围（默

认在 node... ），然后就可以直接写名字了。

resolveLoadef: {
modules: [ 'node_modules', './loaders ']
}
module: {
rules: [{
test:/\.js/ ,
use: [
{
loader: 'replaceLoader' ,
},
{
loader: 'replaceLoaderAsync',
options: {
name: 'lee'}
},]
]}

Loader 可以用于异常捕获、国际化等等，实际上就不需要侵入到业务代码了，通过 loader 检测处理即可，也就是说 loader 可以处理包装源代码.

---

3.如何编写一个Plugin

Loader 是处理模块， plugin 是在打包某个时刻生效（发布订阅机制）。 目前希望实现一个打包结束后在 dist 目录下生成一个版权文件。Plugin 本质上是一个类，类里面有个关键方法 apply 。

class CopyrightwebpackPlugin {
constructor() {
}
apply(compiler){}
}
I
module.exports =CopyrightwebpackPlugin;|

使用的话可以在 webpack.config.js 中引入，然后实例化（因为插件本质上是一个类）即可。

至于我们 new 实例化使用插件时传递的参数就是通过 constructor 接收了。 apply 函数的 compiler 就是一个 webpack 实例，通过它的hooks 钩子（具体可以看官网）可以去到对应的时刻值。 这边就采用了一个 emit 钩子（钩子异步与否是有一定影响的），由于该钩子是异步的我们就tapAsync 方法（则必须 调回调函数 cb ）。 注意 compiler 存放配置的所有内容（包括打包的）而参数compilation 是存放这一次打包的所有内容。

tapAsync( 'CopyrightwebpackPlugin', ( compilation，cb)

通过访问 compilation 里面的 assets 就可以找到打包生成的内容。这里 21 就是文件大小（指字符串长度）， source 就是文件具体内容。

compilation.assets[ copyright.txtj]={
  source:function({
  return "copyright by dell lee'},
size: function(){
return 21;l
}
;cb();})
}

如果是同步代码就直接 tap 方法，且无需回调函数，其余参数一样。如果想查看 webpack 具体参数可以以 script 命令调试，还可以加参数，第一个是启动 node 的调试工具（方便调试插件），

第二个是在第一行打印一个断点，然后就可以在文件任意地方加断点，在浏览器 F12 看。