查看原文 | 编辑此页
插件向第三方开发者提供了 webpack 引擎中完整的能力。使用阶段式的构建回调,开发者可以引入它们自己的行为到 webpack 构建流程中。创建插件比创建 loader 更加高级,因为你将需要理解一些 webpack 底层的内部特性来做相应的钩子,所以做好阅读一些源码的准备!
webpack 插件由以下组成:
在插件开发中最重要的两个资源就是 compiler 和 compilation 对象。理解它们的角色是扩展 webpack 引擎重要的第一步。
这两个组件是任何 webpack 插件不可或缺的部分(特别是 compilation ),因此,开发者在阅读源码,并熟悉它们之后,会感到获益匪浅:
插件是由「具有 apply 方法的 prototype 对象」所实例化出来的。这个 apply 方法在安装插件时,会被 webpack compiler 调用一次。 apply 方法可以接收一个 webpack compiler 对象的引用,从而可以在回调函数中访问到 compiler 对象。一个简单的插件结构如下:
然后,要安装这个插件,只需要在你的 webpack 配置的 plugin 数组中添加一个实例:
使用 compiler 对象时,你可以绑定提供了编译 compilation 引用的回调函数,然后拿到每次新的 compilation 对象。这些 compilation 对象提供了一些钩子函数,来钩入到构建流程的很多步骤中。
关于 compiler , compilation 的可用回调,和其它重要的对象的更多信息,请查看 插件 文档。
有一些编译插件中的步骤是异步的,这样就需要额外传入一个 callback 回调函数,并且在插件运行结束时, 必须 调用这个回调函数。
一旦能我们深入理解 webpack compiler 和每个独立的 compilation,我们依赖 webpack 引擎将有无限多的事可以做。我们可以重新格式化已有的文件,创建衍生的文件,或者制作全新的生成文件。
让我们来写一个简单的示例插件,生成一个叫做 filelist.md 的新文件;文件内容是所有构建生成的文件的列表。这个插件大概像下面这样:
webpack 插件可以按照它所注册的事件分成不同的类型。每一个事件钩子决定了它该如何应用插件的注册。
applyPlugins(name: string, args: any...)
applyPluginsBailResult(name: string, args: any...)
这意味着每个插件回调,都会被特定的 args 一个接一个地调用。 这是插件的最基本形式。许多有用的事件(例如 "compile" , "this-compilation" ),预期插件会同步执行。
applyPluginsWaterfall(name: string, init: any, args: any...)
这种类型,每个插件都在其他插件依次调用之后调用,前一个插件调用的返回值,作为参数传入后一个插件。这类插件必须考虑其执行顺序。 必须等前一个插件执行后,才能接收参数。第一个插件的值是 初始值(init) 。这个模式用在与 webpack 模板相关的 Tapable 实例中(例如 ModuleTemplate , ChunkTemplate 等)。
applyPluginsAsync(name: string, args: any..., callback: (err?: Error) ->void)
这种类型,插件处理函数在调用时,会传入所有的参数和一个签名为 (err?: Error) ->void 的回调函数。处理函数按注册时的顺序调用。在调用完所有处理程序后,才会调用 callback 。 这也是 "emit" , "run" 等事件的常用模式。
applyPluginsAsyncWaterfall(name: string, init: any, callback: (err: Error, result: any) ->void)
这种类型,插件处理函数在调用时,会传入当前值(current value)和一个带有签名为 (err: Error, nextValue: any) ->void. 的回调函数。当调用的 nextValue 是下一个处理函数的当前值(current value)时,第一个处理程序的当前值是 init 。在调用完所有处理函数之后,才会调用 callback,并将最后一个值传入。如果其中任何一个处理函数传入一个 err 值,则会调用此 callback 并将此 error 对象传入,并且不再调用其他处理函数。 这种插件模式适用于像 "before-resolve" 和 "after-resolve" 这样的事件。
applyPluginsAsyncSeries(name: string, args: any..., callback: (err: Error, result: any) ->void)
- 并行(parallel) -
applyPluginsParallel(name: string, args: any..., callback: (err?: Error) ->void)
applyPluginsParallelBailResult(name: string, args: any..., callback: (err: Error, result: any) ->void)
1. github添加ssh key报错Key is invalid. Ensure you've copied the file correctly(2)webpack常用的插件安装命令
webpack常用的插件安装命令:
1:npm install html-webpack-plugin --save-dev //自动快速的帮我们生成HTML。
2:npm install css-loader style-loader --save-dev//样式文件,我们需要两种loader,css-loader 和 style-loader,css-loader会遍历css文件,找到所有的url(...)并且处理。style-loader会把所有的样式插入到你页面的一个style tag中。
3:npm install babel-loader css-loader style-loader --save-dev// 安装加载器(babel-loader 进行转码
css-loader 对 css 文件进行打包
style-loader 将样式添加进 DOM 中)
4:npm install sass-loader node-sass --save-dev//css预编译程序,还需要添加node-sass来解析sass文件
5:npm install url-loader --save-dev//图片自动转成base64编码的
6:npm install jquery moment --save-dev//添加第三方库(jquery和moment)
7:npm install babel-preset-es2015 --save-dev//添加ES6的支持
8:npm install babel-preset-es2015 babel-preset-react --save-dev//安装转码规则
9:npm install webpack-dev-middleware --save-dev//服务器端使用的是express框架,你还可以直接安装express的middleware,webpack配合express
10: npm install react --save-dev//安装并引用 React 模块
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)