Webpack4 自定义 Plugins

最新推荐文章于 2023-05-16 17:21:15 发布
最新推荐文章于 2023-05-16 17:21:15 发布
阅读量1.3k 收藏 2
点赞数
分类专栏： 构建工具 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012987546/article/details/101057049
版权

1.Plugin

Webpack 通过 Plugin 机制让其更加灵活，以适应各种应用场景。

在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件。除此之外 Plugin 还可以广播自定义事件和监听自定义广播（例如，多个Plugin插件之间的通讯就可以通过定义自定义广播事件）。通过 Webpack 提供的 API 可以在构建的合适时机去改变输出的结果。

1)一个最基础的 Plugin 的代码是这样的：

class BasicPlugin{
  // 在构造函数中获取用户给该插件传入的配置
  constructor(options){
  }

  // Webpack 会调用 BasicPlugin 实例的 apply 方法给插件实例传入 compiler 对象
  apply(compiler){
    compiler.plugin('compilation',function(compilation) {
    })
  }
}

// 导出 Plugin
module.exports = BasicPlugin;

2)在使用这个 Plugin 时，相关配置代码如下：

const BasicPlugin = require('./BasicPlugin.js');
module.export = {
  plugins:[
    new BasicPlugin(options),
  ]
}

Webpack 启动后，在读取配置的过程中会先执行 new BasicPlugin(options) 初始化一个 BasicPlugin 获得其实例，接着初始化 compiler 对象后，再调用 basicPlugin.apply(compiler) 给插件实例传入 compiler 对象。 插件实例在获取到 compiler 对象后，就可以通过 compiler.plugin(事件名称, 回调函数) 监听到 Webpack 广播出来的事件（或者监听到自定义广播的事件）。 并且可以通过 compiler 对象去操作 Webpack。

Compiler 和 Compilation

在开发 Plugin 时最常用的两个对象就是 Compiler 和 Compilation，它们是 Plugin 和 Webpack 之间的桥梁。 Compiler 和 Compilation 的含义如下：

  • Compiler 对象包含了 Webpack 环境所有的的配置信息，包含 options，loaders，plugins 这些信息，这个对象在 Webpack 启动时候被实例化，它是全局唯一的，可以简单地把它理解为 Webpack 实例；
  • Compilation 对象包含了当前的模块资源、编译生成资源、变化的文件等。当 Webpack 以开发模式运行时，每当检测到一个文件变化，一次新的 Compilation 将被创建。Compilation 对象也提供了很多事件回调供插件做扩展。通过 Compilation 也能读取到 Compiler 对象。

Compiler 和 Compilation 的区别在于：Compiler 代表了整个 Webpack 从启动到关闭的生命周期，而 Compilation 只是代表了一次新的编译。

2.Plugin的使用

下面将回顾 CSS Loader的使用方法：

新建一个项目

|-- package.json
|-- src
|   |       `-- common.js
|   |       `-- index.html 
|   |       `-- main.css
|           `-- main.js
`-- webpack.config.js

package.json

{
  "name": "testcssloader",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "author": "liujun",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^3.0.0",
    "style-loader": "^0.23.1",
      
    "webpack": "^4.35.3",
    "webpack-cli": "^3.3.6"
  }
}

scripts 属性里面编写了3个脚本：其中 dev 对应的脚本是 构建测试版；其中 build对应的脚本是 构建发布版

webpack.config.js

const path = require('path');
module.exports = {
  entry: './src/main.js',
  output: {
    // 1.指定输出的文件的名称为 bundle.js ( 默认为main.js )
    filename: 'bundle.js',
    // 2. 指定输出文件存放的目录（默认是dist目录）
    path: path.resolve(__dirname, './dist'), // 借助node的path模块来拼接一个绝对路径
  },
  module: {
    rules: [
      {
        test: /\.css$/, // 匹配 .css 结尾的文件,注意test的值不是一个字符串，而是一个正则
        use: ['style-loader', 'css-loader'],
      }
    ]
  }
};

use接收一个数组，数组中可以存放字符串和对象，并且use的别名是 loaders。

main.css

body {
  background-color: pink;
}

common.js

function showHelloWorld(content) {
  alert('hello world')
}
// 通过 CommonJS 规范导出 showHelloWorld 函数
module.exports = showHelloWorld;

main.js

// 1.通过 CommonJS 规范导入 showHelloWorld 函数
const showHelloWorld = require('./common.js');
// 2.执行 showHelloWorld 函数
showHelloWorld('Webpack的安装和使用');
// 3.通过 CommonJS 规范导入 CSS 模块
require('./main.css');

index.html

<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
<div id="app"></div>
<!--导入 Webpack 输出的 JavaScript 文件-->
<script src="../dist/bundle.js"></script>
</body>
</html>

本地安装 webpack 和 用到的 loader

npm install webpack@4.35.3  --save-dev
npm install webpack-cli@3.3.6  --save-dev
npm install style-loader@0.23.1  --save-dev
npm install css-loader@3.0.0  --save-dev

在项目的根目录，执行脚本构建项目

npm run dev

打包后输出的结果

|-- dist
|   |-- bundle.js
|-- node_modules
|-- package-lock.json
|-- package.json
|-- src
|   |-- common.js
|   |-- index.html
|   |-- main.css
|   `-- main.js
`-- webpack.config.js

2.自定义Plugin

Webpack4 Plugin 的API文档： https://webpack.js.org/api/compiler-hooks/#hooks

1.定义一个console-plugin

该插件是负责：控制台打印 Webpack 使用过的插件。

1.新建一个 plugins 文件夹

|-- dist
|-- node_modules
|-- package-lock.json
|-- package.json
|-- src
|   |-- plugins 
|   |   | -- console-plugin.js
|   |-- common.js
|   |-- index.html
|   |-- main.css
|   `-- main.js
`-- webpack.config.js

2.自定义一个 console-plugin

console-plugin.js

/**
 * 这个插件的作用是:控制台打印项目中所用到的 plugin
 */
class ConsolePlugin{
  // 1.在构造函数中获取用户给该插件传入的配置
  constructor(options){
    this.show = options.show || true
    if(this.show === false){
      console.log('===============start===================')
      console.log('constructor.options=',options) // constructor.options= { show: true }
    }
  }

  // 2.Webpack 会调用 ConsolePlugin 实例的 apply 方法给插件实例传入 compiler 对象
  apply(compiler){
    // 3.compiler.options 是拿到webpack.config.js配置文件中所有的配置
    let plugins = compiler.options.plugins // 4.获取所有的 plugins
    plugins.forEach((plugin,index)=>{
      if(this.show === false) console.log(index+') plugin=', plugin) // 0) plugin= ConsolePlugin {}
    })
    if(this.show === false) console.log('===============end===================')
  }
}

// 导出 Plugin
module.exports = ConsolePlugin;

3.在webpack的配置文件使用 console-plugin

webpack.config.js

const path = require('path');
// 1.导入ConsolePlugin 插件
const ConsolePlugin = require('./plugins/console-plugin.js');
module.exports = {
  entry: './src/main.js',
  output: {
    // 1.指定输出的文件的名称为 bundle.js ( 默认为main.js )
    filename: 'bundle.js',
    // 2. 指定输出文件存放的目录（默认是dist目录）
    path: path.resolve(__dirname, './dist'), // 借助node的path模块来拼接一个绝对路径
  },
  module: {
    rules: [
      {
        test: /\.css$/, 
        use: ['style-loader', 'css-loader'],
      }
    ]
  },
  plugins: [
  // 2.使用 ConsolePlugin 插件
    new ConsolePlugin({
      show:true
    })
  ]
};

4.在根目录执行打包命令：npm run dev， 然后控制台输出如下：

PS F:\blog\webpack-study\webpackCode\13-编写自定义Plugin> webpack --mode development
===============start===================
constructor.options= { show: true }
0) plugin= ConsolePlugin { show: true }
===============end===================
Hash: 9747b37b4f5b09e2dd2d
Version: webpack 4.39.3
Time: 328ms
Built at: 2019-09-20 10:58:10
    Asset      Size  Chunks             Chunk Names
bundle.js  24.2 KiB    main  [emitted]  main
Entrypoint main = bundle.js
[./node_modules/css-loader/dist/cjs.js!./src/main.css] 178 bytes {main} [built]
[./src/common.js] 152 bytes {main} [built]
[./src/main.css] 1.05 KiB {main} [built]
[./src/main.js] 254 bytes {main} [built]
    + 3 hidden modules

2.定义一个watch-webpack-lifecycle-plugin插件

该插件是：负责监控 Webpack 构建的生命周期

1.新建一个 plugins 文件夹

|-- dist
|-- node_modules
|-- package-lock.json
|-- package.json
|-- src
|   |-- plugins 
|   |   | -- console-plugin.js
|   |   | -- watch-webpack-lifecycle-plugin.js
|   |-- common.js
|   |-- index.html
|   |-- main.css
|   `-- main.js
`-- webpack.config.js

2.自定义一个 watch-webpack-lifecycle-plugin

watch-webpack-lifecycle-plugin.js

/**
 * 这个插件的作用是:监控 Webpack 构建的生命周期的 plugin
 */
class WebpackLifeCyclePlugin{
  // 在构造函数中获取用户给该插件传入的配置
  constructor(options){
  }

  // Webpack4 以前的写法
  //  Webpack会调用 WebpackLifeCyclePlugin 实例的 apply 方法给插件实例传入 compiler 对象
  // apply(compiler){
  //   // 1.当依赖的文件发生变化时会触发 watch-run 事件
  //   compiler.plugin('watch-run', (watching, callback) => {
  //     console.log('============watch-run'+'============')
  //     // 这是一个异步事件，要记得调用 callback 通知 Webpack 本次事件监听处理结束。
  //     callback();
  //   });
  //   // 2.第一个编译完成
  //   compiler.plugin('after-compile', (stats) => {
  //     console.log('============after-compile'+'============')
  //   });
  //   // 3.确定好要输出哪些文件，执行文件输出，可以在这里获取和修改输出内容
  //   compiler.plugin('emit', (compilation, callback) => {
  //     console.log('============emit'+'============')

  //     // 这是一个异步事件，要记得调用 callback 通知 Webpack 本次事件监听处理结束。
  //     // 如果忘记了调用 callback，Webpack 将一直卡在这里而不会往后执行。
  //       callback()
  //   });
  //   // 4.完成一次构建任务
  //   compiler.plugin('done', (stats) => {
  //     console.log('============done'+'============')
  //   });
  //   // 5.构建失败
  //   compiler.plugin('failed', (err) => {
  //     console.log('============failed'+'============')
  //   });

  // }

  // Webpack4 以后的写法 (注意：compiler.hooks.xxxx  代替了compiler.plugin('xxxx', func)  )
  //  Webpack4 会调用 WebpackLifeCyclePlugin实例的 apply 方法给插件实例传入 compiler 对象
  apply(compiler){
    let MyPlugin = 'WebpackLifeCyclePlugin'
    // 1.读取配置的 Entrys，为每个 Entry 实例化一个对应的 EntryPlugin，为后面该 Entry 的递归解析工作做准备。
    //  compiler.hooks.监听事件的名称.tap(插件名称，回调函数)。具体参数的可到官方API文档查看
    compiler.hooks.entryOption.tap(MyPlugin, (context, entry) => {
      console.log('============entry-option'+'============')
    });
    // 2.当依赖的文件发生变化时会触发 watch-run 事件
    // compiler.hooks.监听事件的名称.tap(插件名称，回调函数)。具体参数的可到官方API文档查看
    compiler.hooks.watchRun.tapAsync(MyPlugin, (watching, callback) => {
      console.log('============watch-run'+'============')
      // 这是一个异步事件，要记得调用 callback 通知 Webpack 本次事件监听处理结束。
      callback();
    });
    // 3.第一个编译完成
    compiler.hooks.afterCompile.tap(MyPlugin, (stats) => {
      console.log('============after-compile'+'============')
    });
    // 4.确定好要输出哪些文件，执行文件输出，可以在这里获取和修改输出内容
    compiler.hooks.emit.tapAsync(MyPlugin, (compilation, callback) => {
      console.log('============emit'+'============')

      // 这是一个异步事件，要记得调用 callback 通知 Webpack 本次事件监听处理结束。
      // 如果忘记了调用 callback，Webpack 将一直卡在这里而不会往后执行。
        callback()
    });
    // 5.完成一次构建任务
    compiler.hooks.done.tap(MyPlugin, (stats) => {
      console.log('============done'+'============')
    });
    // 6.构建失败
    compiler.hooks.failed.tap(MyPlugin, (err) => {
      console.log('============failed'+'============')
    });

  }
}

// 导出 Plugin
module.exports = WebpackLifeCyclePlugin;

3.在webpack的配置文件使用 watch-webpack-lifecycle-plugin

webpack.config.js

const path = require('path');
const ConsolePlugin = require('./plugins/console-plugin.js');
// 1.导入WebpackLifeCyclePlugin插件
const WebpackLifeCyclePlugin = require('./plugins/watch-webpack-lifecycle-plugin.js');
module.exports = {
  entry: './src/main.js',
  output: {
    // 1.指定输出的文件的名称为 bundle.js ( 默认为main.js )
    filename: 'bundle.js',
    // 2. 指定输出文件存放的目录（默认是dist目录）
    path: path.resolve(__dirname, './dist'), // 借助node的path模块来拼接一个绝对路径
  },
  module: {
    rules: [
      {
        test: /\.css$/, 
        use: ['style-loader', 'css-loader'],
      }
    ]
  },
  plugins: [
    new ConsolePlugin({
      show:false
    }),
    // 2.使用该插件 
    new WebpackLifeCyclePlugin()
  ]
};

4.在根目录执行打包命令：npm run dev， 然后控制台输出如下：

PS F:\blog\webpack-study\webpackCode\13-编写自定义Plugin> npm run dev

> testcssloader@1.0.0 build F:\blog\webpack-study\webpackCode\13-编写自定义Plugin
> webpack --mode production

============entry-option============
============after-compile============
============emit============
============done============
Hash: 665b3555f35155c730f0
Version: webpack 4.39.3
Time: 261ms
Built at: 2019-09-20 11:36:11
    Asset      Size  Chunks             Chunk Names
bundle.js  6.94 KiB       0  [emitted]  main
Entrypoint main = bundle.js
[0] ./src/main.js 254 bytes {0} [built]
[1] ./src/common.js 152 bytes {0} [built]
[2] ./src/main.css 1.05 KiB {0} [built]
[3] ./node_modules/css-loader/dist/cjs.js!./src/main.css 178 bytes {0} [built]
    + 3 hidden modules

3.自定义Hooks钩子

上面的案例只是监听了 Webpack 生命周期中的 Hooks 钩子函数的回调，下面将编写自定义Hooks 和 监听自定的Hooks事件

Webpack 的 Plugin 的API文档： https://webpack.js.org/api/plugins/#custom-hooks

console-plugin.js

const SyncHook = require('tapable').SyncHook;
/**
 * 这个插件的作用是:控制台打印项目中所用到的 plugin
 */
class ConsolePlugin{
  // 在构造函数中获取用户给该插件传入的配置
  constructor(options){
    .......
    .......
  }

  // Webpack 会调用 ConsolePlugin 实例的 apply 方法给插件实例传入 compiler 对象
  apply(compiler){
    ......
    ......
  
    // 1.判断该 Hook 是否已经存在
    // Within the `apply` method...
    if (compiler.hooks.myCustomHook) throw new Error('myCustomHook Already in use');
    // 2.自定义 myCustomHook， ['arg0', 'arg1', 'arg2']表明触发这个myCustomHook需要传递3个参数
    compiler.hooks.myCustomHook = new SyncHook(['arg0', 'arg1', 'arg2']);
    // 3.监听 自定义 myCustomHook 的事件，如果一旦有自定义 myCustomHook事件触发将会回调下面的函数
    compiler.hooks.myCustomHook.tap('WebpackLifeCyclePlugin', (a,b,c) => {
      console.log('============myCustomHook1'+'============'+a,b,c)
    });
    
  }
}

// 导出 Plugin
module.exports = ConsolePlugin;

watch-webpack-lifecycle-plugin.js

// const SyncHook = require('tapable').SyncHook;

class WebpackLifeCyclePlugin{
  // 在构造函数中获取用户给该插件传入的配置
  constructor(options){
  }

  // Webpack4 以后的写法 （ 会调用 ConsolePlugin 实例的 apply 方法给插件实例传入 compiler 对象）
  apply(compiler){
    let MyPlugin = 'WebpackLifeCyclePlugin'
    ......
    ......
    
    // 6.构建失败
    compiler.hooks.failed.tap(MyPlugin, (err) => {
      console.log('============failed'+'============')
    });
      
      
    // 7.自定义一个hook
    // Within the `apply` method...
    // if (compiler.hooks.myCustomHook) throw new Error('myCustomHook Already in use');
    // compiler.hooks.myCustomHook = new SyncHook(['arg0', 'arg1', 'arg2']);

    // 8.监听自定义的hook （ 必须先监听后触发 ）
    compiler.hooks.myCustomHook.tap(MyPlugin, (a,b,c) => {
      console.log('============myCustomHook2'+'============'+a,b,c)
    });
    // 9.触发自定义的hook ( 传递3个参数 )
    // Wherever/whenever you'd like to trigger the hook...
    compiler.hooks.myCustomHook.call('a1', 'b1', 'c1');

    
  }
}

// 导出 Plugin
module.exports = WebpackLifeCyclePlugin;

在根目录执行打包命令：npm run dev， 然后控制台输出如下：

PS F:\blog\webpack-study\webpackCode\13-编写自定义Plugin> npm run dev

> testcssloader@1.0.0 dev F:\blog\webpack-study\webpackCode\13-编写自定义Plugin
> webpack --mode development

============myCustomHook1============a1 b1 c1
============myCustomHook2============a1 b1 c1
============entry-option============
============after-compile============
============emit============
============done============
Hash: 9747b37b4f5b09e2dd2d
Version: webpack 4.39.3
Time: 292ms
Built at: 2019-09-20 12:47:29
    Asset      Size  Chunks             Chunk Names
bundle.js  24.2 KiB    main  [emitted]  main
Entrypoint main = bundle.js
[./node_modules/css-loader/dist/cjs.js!./src/main.css] 178 bytes {main} [built]
[./src/common.js] 152 bytes {main} [built]
[./src/main.css] 1.05 KiB {main} [built]
[./src/main.js] 254 bytes {main} [built]
    + 3 hidden modules

源码下载

LiuJun2Son
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Webpack 自定义插件编写
weixin_45032067的博客
05-19 2274
当编写一个自定义插件时，需要知道webpack 插件由以下组成： 一个 JavaScript 命名函数或 JavaScript 类。 在插件函数的 prototype 上定义一个apply方法。 指定一个绑定到 webpack 自身的事件钩子。 处理 webpack 内部实例的特定数据。 功能完成后调用 webpack 提供的回调。 基本插件架构 插件是由「具有apply方法的 prototype 对象」所实例化出来的。这个apply方法在安装插件时，会被 webpack compi......
webpack开发自定义功能插件
问白的博客
03-27 3785
webpack 插件开发 简介 使用webpack开发一些自定义功能的插件，最主要的目的是了解webpack工作流的方式，更深层次的认识和了解webpack工作原理，这样以后如有需要，也可结合自身所在业务去定制不同的插件，来提高开发效率。 webpack提供的hook(钩子) 在webpack整个工作流中在不同的阶段对外提供了不同的hook,使得开发者可以利用这些钩子做一些自己定制化功能的plug...
【webpack自定义插件】实现一个webpack自定义插件
lei_wang_lei的博客
03-28 660
如何开发一个webpack自定义插件
霖呆呆的六个自定义Webpack插件详解-自定义plugin篇(3)
qq_39448719的博客
05-19 1257
霖呆呆的webpack之路-自定义plugin篇你盼世界，我盼望你无bug。Hello 大家好！我是霖呆呆！有很多小伙伴在打算学写一个webpack插件的时候，就被官网上那一长条一长条的...
webpack入门学习笔记03 —— 自定义脚本，帮助项目管理
weixin_33737134的博客
06-19 271
1. 写在前面 经过前两章博客的基础讲解，我们知道如果想要打包编译项目，可以执行 npx webpack 命令，然后webpack就会根据配置文件 webpack.config.js 来对项目进行打包编译。但是现在我们可能遇到以下需求： webpack的配置文件不要叫做webpack.config.js,而是叫做 webpack.config.allen.js 每次打包编译的时候，都要使用 np...
webpack3升级到webpack4遇到问题总结
10-16
在将项目从webpack3升级到webpack4的过程中，开发者可能会遇到一系列问题。以下是对这些问题的详细解释及相应的解决方案。 1. **移除`CommonsChunkPlugin`** Webpack4已经移除了`CommonsChunkPlugin`，现在需要...
详解webpack4.x之搭建前端开发环境
10-17
4. **插件（plugins）**：Webpack 插件可以扩展其功能，例如代码混淆、压缩、环境变量重定义等。常见的插件包括： - **html-webpack-plugin**：自动创建HTML文件并插入打包后的脚本。 - **extract-text-webpack-...
详解webpack loader和plugin编写
10-17
- Plugin 不是通过 `require()` 或 `import` 调用，而是通过 Webpack 配置文件中的 `plugins` 数组声明。 - Plugin 是基于事件驱动的，会在特定的生命周期钩子上运行，如 `compilation`、`emit`、`done` 等。 - ...
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
10-17
Webpack4提供了一种零配置的快速启动方式，但在此场景下，我们需要自定义配置。创建`webpack.config.js`文件： ```javascript const path = require('path'); module.exports = { mode: "production", // 生产环境...
webpack引入eslint配置详解
08-28
5. plugins：引用第三方的插件 6. env：指定代码运行的宿主环境 7. rules：启用额外的规则或覆盖默认的规则 8. globals：声明在代码中的自定义全局变量 五、使用第三方的ESLint配置 我们可以使用第三方的ESLint...
webpack4:webpack4自定义配置尝鲜
05-08
webpack4项目脚手架从零开始写 前言 webpack4出来也有一段时间了，之前的项目还一直用的是webpack2版本。由于工作太忙，也没有时间去熟悉v3版本的特点与优势。这次所以从4开始重新学习一下webpack的基础配置项以及最新的插件都能干些什么？ 所用到的插件 |-- babel // 这个几乎是必装的，浏览器识别ES6就全靠它了 |-- html-webpack-plugin // 强大的html处理器，没有不用的理由。可以生成模板，给链接添加缓存，压缩... |-- extract-text-webpack-plugin // 有了它，我们就可以分离项目中的css，用link的形式来导入到页面中 |-- optimize-css-assets-webpack-p
webpack-compiler-plugin：:building_construction:轻松聆听webpack编译器挂钩并在事件上执行命令
02-24
Webpack编译器插件 轻松监听webpack编译器的钩子并在事件上执行命令。 API 该插件在webpack构建过程的关键阶段运行您指定的命令。 buildStart 第一次启动webpack构建时，仅在插件加载后才运行一次。 请参阅 。 compileStart 每次webpack开始编译源代码时都会运行此--watch ，使用--watch标志时可以多次运行。 请参阅 。 compileEnd 每次webpack完成源代码编译后，即在代码发出后立即运行。 请参阅 。 buildEnd 仅在退出构建过程时，这才是最后一个阶段。 当由于构建失败，中断信号等导致退出时也会触发。 请参阅 。 例子 /* webpack.config.js */ const { execSync } = require ( "child_process" ) ; const { Webp
解锁webpack技能
qq_42880714的博客
10-24 649
webpack基础知识
webpack 编写插件，webpack 自定义插件
qq_41974199的博客
05-27 670
webpack 编写插件，webpack 自定义插件 文章目录webpack 编写插件，webpack 自定义插件1：安装 webpack2：创建装载机与主文件 index.js3：创建自定义插件4：使用插件5：做一些有趣的事情，另外生成一个描述文件 1：安装 webpack 安装webpack: npm install --save-dev webpack npm install --save-dev webpack-cli 2：创建装载机与主文件 index.js 新建主文件 index.js: c
超详细webpack的plugin讲解，看不懂算我输，案例>原理>实践
邓占勇的博客
04-28 2695
前言 本篇文章为webpack系列文章的第三篇，主要内容是对webpack的plugin进行详细的讲解，从使用，到原理，再到自己开发一个plugin，对每个过程都会进行详细的分析介绍。如果你对webpack了解的还比较少，建议你先阅读以下往期文章。 如何使用webpack实现模块化打包 webpack的核心机制之loader的秘密 介绍 plugin是webpack的一个插件机制，它为项目的构...
webpack打包，生命周期回调插件
Gary的博客
07-01 1066
webpack打包，生命周期回调，打包过程回调、结束回调，webpack自定义插件
Webpack中compiler.hooks
zhoukaibai的博客
05-16 621
请注意，这只是一些常见的钩子，并且具体的触发顺序可能会因配置和插件的不同而有所变化。对于某些特定的钩子，可能还会有更多的细分阶段。了解每个钩子的触发时机对于开发自定义插件和对Webpack构建过程的深入理解非常有帮助。在Webpack中，以下是。
自定义webpack插件
weixin_30289831的博客
03-16 353
// MyPlugin.js function MyPlugin(options) { this.options = options; } MyPlugin.prototype.apply = function(compiler) { // ... compiler.plugin('compilation', function(compilation) { console.lo...
[ webpack ] 在HTML源代码前加上自动加上备注说明
ljw1412的博客
03-10 1105
打包环境：webpack4 1. 思考 如何在打包过程中在<html>标签前自动生成备注说明？ 使用html-webpack-plugin进行html生成。 翻阅源代码，发现有`html-webpack-plugin-before-html-processing`, `html-webpack-plugin-after-html-processing`, `html-webpa...
webpack自定义插件
最新发布
09-11
4. 在 `apply` 方法中，可以通过 Webpack 提供的钩子（Hook）来注册各种编译过程的事件回调函数，以实现自定义的功能。 下面是一个简单的示例，展示了如何创建一个打印构建信息的自定义插件： ```javascript class...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值