CODEWITHSUNDEEP
webpack
mockaroodev
mockaroodev

Reputation: 2071

Alter source with webpack plugin

I'm trying to write a webpack plugin that accumulates js require/import calls matching a certain pattern, removes them from the source before they are resolved (because resolution will fail) and then passes the accumulated information along to separate bundle-building process. How would one go about modifying source with a plugin? Furthermore, is a plugin even the right approach for this?

Upvotes: 4

Views: 1220

Answers (1)

Sean Larkin
Sean Larkin

Reputation: 6420

The input => output pattern you described there is more of the behavior of a Webpack loader.

What is a Webpack Loader?

A webpack loader in its simplest form is a function which takes a source argument, and then must return a source: 

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

  return yingSources; 
}

What is a Webpack Plugin?

A Plugin does everything a loader can't. I like referring people to the ProgressPlugin - which is part of the webpack lib - when they want to learn how to implement the lifecycle hooks for a webpack plugin.

A plugin in its simplest form is an ES5 OOP Function with one prototype method apply. This apply function gets supplied a compiler variable which serves as access to the Compiler API. 

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


}

AllyAwesomePlugin.prototype.apply = function(compiler) {

}

Here is some great documentation on how to write a Webpack Plugin and more information about the Webpack Compiler/Plugin API.

Upvotes: 6

Related Questions