Webpack有哪些常见的Plugin?他们是解决什么问题的

更新日期: 2019-03-31阅读: 3.5k标签: webpack
定义: 音译过来就是插件, 在webpack中, 插件目的在于解决 loader 无法实现的其他事  

webpack 插件是一个具有 apply 属性的 JavaScript 对象。apply 属性会被 webpack compiler 调用,并且 compiler 对象可在整个编译生命周期访问

代码理解:

const pluginName = 'ConsoleLogOnBuildWebpackPlugin';

class ConsoleLogOnBuildWebpackPlugin {
    // compiler 对象是 webpack 的编译器对象
    apply(compiler) {
        // hook中的tap函数的第一个参数便是插件的名称
        compiler.hooks.run.tap(pluginName, compilation => {
            // 我们的webpack配置应用了插件后便会执行该函数体
            console.log("webpack 构建过程开始!");
        });
    }
}

用法:

const webpack = require('webpack');
// 上方定义的插件
const ConsoleLogOnBuildWebpackPlugin = require('ConsoleLogOnBuildWebpackPlugin');
webpack({
    // ...
    plugins: [
        new ConsoleLogOnBuildWebpackPlugin({/* some plugin options */})
    ]
    // ...
});

上面示例中有提到hooks,在plugin有哪些hooks呢?我们也简单列举一下

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


Webpack有哪些常见的Plugin

如上篇loader所讲,这里没有任何意义,只是想让你们加深下感觉,了解下自己项目中到底用到了哪些plugin, 下面放一张来自官网的图


Plugin的特性

  • 是一个独立的模块
  • 模块对外暴露一个 js 函数
  • 函数的原型 (prototype) 上定义了一个注入 compiler 对象的 apply 方法
  • apply 函数中需要有通过 compiler 对象挂载的 webpack 事件钩子,钩子的回调中能拿到当前编译的 compilation 对象,如果是异步编译插件的话可以拿到回调 callback
  • 完成自定义子编译流程并处理 complition 对象的内部数据
  • 如果异步编译插件的话,数据处理完成后执行 callback 回调

简单理了一下plugin的特性再回过头去看一看示例,应该就会更清淅了


总结

  • plugin是用来拓展webpack功能的
  • plugin是一个具有 apply 属性的 JavaScript 对象
  • apply 属性会被 webpack compiler 调用
  • compiler 对象是 webpack 的编译器对象
  • 编译器对象会有一系列hooks
  • 利用hooks在不同阶段完成对被编译者的处理


链接: https://fly63.com/article/detial/2596

浅谈Webpack打包工具的应用

webpack 在前端工程中随处可见,当前流行的 vue, react, weex 等解决方案都推崇 webpack 作为打包工具。前端工具云集的时代,这是你值得选择的之一。

一步一步webpack,webpack的学习入门

webpack是前端工程构建的一套工具,为什么一个程序称之为一套呢,是因为webpack其实是npm的一个模块,使用起来的话,这期间还需要很多其它模块来进行支持,所以我称之为一套工具。

如何写 Webpack 配置文件

本文从一个小Demo开始,通过不断增加功能来说明webpack的基本配置,只针对新手。webpack基本的配置就可以熟悉了,会引入loader,配置loader选项,会设置alias,会用plugins差不多。

WebPack中Plugins的使用和整理,以及常用的Plugins插件

Plugins是webpack的基础,我们都知道webpage的plugin是基于事件机制工作的,这样最大的好处是易于扩展。讲解如果扩展内置插件和其他插件,以及我们常用的Plugins插件

大多数项目中会用到的webpack小技巧

webpack技巧的总结:进度汇报、压缩、复数文件打包、分离app文件与第三方库文件、资源映射、输出css文件、开发模式、分析包的大小、更小的react项目、更小的Lodash、引入文件夹中所有文件、清除extract-text-webpack-plugin日志。

优化Webpack构建性能的几点建议

Webpack 作为目前最流行的前端构建工具之一,在 vue/react 等 Framework 的生态圈中都占据重要地位。在开发现代 Web 应用的过程中,Webpack 和我们的开发过程和发布过程都息息相关,如何改善 Webpack 构建打包的性能也关系到我们开发和发布部署的效率。

Webpack 4正式发布了!

新版 Webpack 中我们所做的每一个更新目的都在于此,为了当大家在使用 Webpack 的时候敏捷连续毫无顿挫感。 webpack 4 进行构建性能测试,得出的结果非常有趣。结果很惊人,构建时间降低了 60%-98%!

Webpack 4.0.0不再支持 Node.js 4

Webpack 是一个现代 JavaScript 应用程序的模块打包器 (module bundler) 。当 Webpack 处理应用程序时,它会递归地构建一个依赖关系图,其中包含应用程序需要的每个模块

我当初为什么写webpack_Tobias Koppers

Tobias Koppers是一位自由软件开发者,家住德国纽伦堡。他因写出webpack这个已有数百万开发者使用的开源软件而名噪一时。他目前专注于JavaScript和开源项目。以下是我对他个人的专访,希望对大家有所启发。

webpack项目轻松混用css module

本文讲述css-loader开启css模块功能之后,如何与引用的npm包中样式文件不产生冲突。比如antd-mobilenpm包的引入。在不做特殊处理的前提下,样式文件将会被转译成css module。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!