使用webpack插件更改源代码

Question

我正在尝试编写一个webpack插件，用于累积符合特定模式的js require / import调用，在解析之前将它们从源中删除（因为解析失败），然后将累积的信息传递给单独的bundle-建设过程。如何使用插件修改源代码？此外，插件甚至是正确的方法吗？

Answer 1

您描述的input => output模式有更多Webpack加载器的行为。

什么是Webpack Loader？

最简单形式的webpack loader 是一个带有source参数的函数，然后必须返回一个源：

function allySimpleButAwesomeWebpackLoader(source) {
  var yingSources = source + 'SomeString';

  return yingSources; 
}

什么是Webpack插件？

插件可以完成装载程序无法完成的所有操作。我喜欢将人们引用到ProgressPlugin - 这是webpack lib的一部分 - 当他们想要学习如何为webpack插件实现生命周期钩子时。

最简单形式的 插件 是一个带有一个原型方法apply的ES5 OOP函数。此apply函数提供了一个compiler变量，该变量用作对Compiler API的访问。

function AllyAwesomePlugin(optionsObject) {
  this.pluginOptions = optionsObject;    


}

AllyAwesomePlugin.prototype.apply = function(compiler) {

}

Here是关于如何编写Webpack插件以及有关Webpack Compiler / Plugin API的更多信息的一些很好的文档。