webpack插件踩坑记

[SunShinewyf]

这篇文章不针对一些基础概念作解释，比如如何编写插件以及插件的基本形式，基础部分可以移步这里
最近要开发一个webpack插件，功能是将入口文件中相关联的图片文件进行单独输出，在这期间遇到的一些问题记录如下：

如何确定图片是被关联的

在每次执行webpack命令进行编译的时候，总能看到如下的输出:

其中上面的绿色表示的输出的文件以及文件的一些信息，下面的显示built的就是所有关联的文件。
所以通过这个就可以知道每一个关联的文件必然存放在compilation这个对象中，但是什么时候时候可以获取这些信息呢？
webpack的具体编译过程可以参考这里以及这里
可以得出结论在optimize和optimize-tree的时候表示webpack已经编译完成，要想拿到chunk信息，就需要在optimize-chunks这个阶段进行。
示例代码如下：

compilation.plugin('optimize-chunks', function(chunks) {
    //unless you specified multiple entries in your config
    //there's only one chunk at this point
    chunks.forEach(function (chunk) {
        //chunks have circular references to their modules
        chunk.modules.forEach(function (module){
            //module.loaders, module.rawRequest, module.dependencies, etc.
        }); 
    });
});

在最里面的回调中就可以访问每一个相关联的文件信息，把module中的信息打印出来所示：

在这里可以获取到图片信息，比如name,context,_source

如何读取关联的图片内容

因为一个项目里面可能有多个图片，而且有些图片可能并没有使用，如何将使用的文件信息读取出来
解决方式1:借鉴ExtractTextPlugin中的思想，就是在webpack的loader配置中就直接调用ExtractTextPlugin.extract这个方法,但是而这个方法里面就是
通过调用各种css loader来获取图片信息，因为每一个loader都是一个函数，而且接受css文件的content作为参数，这样就可以直接调用css文件的信息。但是如
果自己写的插件也采取这种方式，由于css和image所调用的loader不一样，所以必然也存在问题，而且url-loader和file-loader的处理方式差异很大，所以就舍弃了
这种做法
解决方式2:直接食用第一个问题中获取的module._source作为图片的content,但是此时这个content 是经过loader处理之后得到的信息

• 经url-loader处理后，content信息为：

module.exports = "base64Data"

• 经file-loader处理之后，content信息为:

	"__webpack_public_path__ + " +url;

其中url为图片输出的路径

针对不同的loader如何处理

• 当是file-loader处理时，图片已经输出，已经达到我们的目的
• 当是url-loader处理时，最后输出的是base64编码，如何将编码信息转换成图片信息（进行中）
  这种方式中，直接将_source输出会报错:

   compilation.assets[fullPath] = _source

这个地方花了好长时间，而且跑到相对应的Compiler.js对应的源码去看，也没有看出来，之后去官方文档去看发现传进去的content格式必须如下：

 compilation.assets['filelist.md'] = {
      source: function() {
        return filelist;
      },
      size: function() {
        return filelist.length;
      }
    };

结果修复了

另一种获取方式（尝试中）

由于在前面中可以获取图片的name和context，两者拼接就可以得到完整的绝对路径，然后使用node的fs模块对文件进行读取和创建即可

小结：多看官方文档，多看源码