Webpackプラグインのファイルコンテンツにアクセスする

Question

webpackが生成し、カスタムプレフィックスをプレフィックスとして付加するCSSを使用するWebpackプラグインを作成しようとしています。私は稼働しており、コンパイラのemitフェーズに夢中になっていますが、必要なファイルの内容にアクセスするためのエレガントな方法が見つかりません。

以下は例Writing a Pluginに基づいて、私が今までに得たすべてのコードです。資産の内容にアクセスするにはどうすればよいですか？ Logging compilation.assets['main.css']は、私がソースへの不正アクセスを表示するだけです。

PrefixCssPlugin.prototype.apply = function(compiler) { 
    compiler.plugin('after-compile', function(compilation) { 
    console.log(new RawSource(compilation.assets['main.css'])); 
    }); 

    compiler.plugin('emit', (compilation, callback) => { 
    let prefixedCssContent = ''; 
    for (const filename in compilation.assets) { 
     for (const pattern in filePatterns) { 
     if (filePatterns[pattern].test(filename)) { 
      console.log(`${filename} matched ${filePatterns[pattern]}`); 
      console.log(JSON.stringify(compilation.assets[filename])); 

      // I want to access the contents of the matched file here, and pass it 
      // to another module that will handle the prefixing. 
/*   prefixedCssContent = cssPrefixer(
      compilation.assets[filename], 
      cssPrefix, 
      shouldPrefixElements); */ 
     } 
     } 
    } 

    // Insert this list into the webpack build as a new file asset: 
    compilation.assets['prefixed.css'] = { 
     source: function() { 
     return prefixedCssContent; 
     }, 
     size: function() { 
     return prefixedCssContent.length 
     } 
    }; 

    callback(); 
    }); 
}; 

Answer 1

ドキュメントはソースコードを読んでいると明言していますが、私はそれを十分に読まなかっただけです。 Here's私が探していたもの。それはすべて動作し、ちょうど微調整とエラー処理が残っています。