Webpack 自定义插件

1，webpack背景知识

一款前端项目开发构建工具。或者用gulp。

前后端分离的开发环境，解析不同的资源文件，统一打包分包，按需加载，网站优化等。

主要构成，入口/出口，loader和plugins、model、rules等配置，webpack自身提供插件如：分析、压缩、html、 provider等。

自定义的plugins，需要了解一些模块化、语法树、compiler、compilation、

 

2，webpack 自定义插件的开发

2.1、创建一个plugins

1. 构建函数
2. 扩展 apply 方法
3. 指定webpack自身的事件钩子
4. 处理webpack内部实例的特定数据
5. 功能完成后，调用webpack提供的回调

// 自定义事件的插件函数，也可以写成class的形式，但是内部apply方法不能用 箭头函数。
function myPlugin () {

}
// 对 插件函数扩展 apply 方法
myPlugin.prototype.apply = function(compiler) {
    // webpack提供的编译函数模板，监听webpack的钩子事件，然后会触发 compilation，和插件执行完成的回调。
    compiler.plugin('webpacksEventHook', function(compilation,callback) {
        console.log('this is customer plugins');
        callback();
    });
}

 

2.2、webpack插件的钩子函数

webpack在打包过程中有自己的生命周期函数，webpack打包过程做了分类，于是就有了很多不同类型的插件。

其中有两个重要的对象：compilation，compiler

compiler 包含webpack的所有配置信息（webpack.config.js），作为 webpack 的实例在启动时被初始化。

compilation 包含当前模块，编译文件，例如在开发环境，当文件发生变化，就会有一个新的 compilation。

以下内容就是一个webpack的自定义插件。

function MyPlugin(options) {
    this.options = options;
}
MyPlugin.prototype.apply = function(compiler) {
    
    console.log('开始执行插件')
    
    compiler.plugin('compile', function () {
        console.log('webpack 编译器开始编译...-----')
    })
    
    compiler.plugin('compilation', function (compilation) {
        console.log('编译器开始一个新的编译任务...-----')
        compilation.plugin('optimize', function () {
             console.log('编译器开始优化文件...')
        })
    })
    compiler.plugin('done', function () {
        console.log('打包完成......')
    })
    
};
module.exports = MyPlugin;

 

举例说明，通过emit钩子获取编译后块文件包含的路径，webpack高版本api有变化不支持，使用webpack2.

compiler.plugin('emit', function (compilation, callback) {
  // compilation.chunks 存放所有代码块，是一个数组
  compilation.chunks.forEach(function (chunk) {
    // chunk 代码块
    // 代码块由模块组成，读取模块
    chunk.forEachModule(function (module) {
      // module 模块
      // module.fileDependencies 访问当前模块需要的依赖，即是文件路径。
      module.fileDependencies.forEach(function (filepath) {
        console.log(filepath)
      })
    })
  })
  // emit 是异步事件，AsyncSeriesHook，异步事件都需要调用callback。有点像英语里的及物动词和不及物动词
  callback();
})