ShakaCode | ShakaCode Blog | Rails On Maui Blog | Rails | ReactJs | JavaScript | Webpack | Productivity |

Understanding the Webpack Module Bundler


#1

Webpack is definitely one of the most useful new tools in the JavaScript world.

Part of the key to understanding webpack is to understand how loaders work.

http://webpack.github.io/docs/loaders.html

The absolute key is that you can quickly read this line and understand it.

require("style-loader!css-loader!less-loader?strictMath&noIeCompat!./my-styles.less");

So what does this line mean?

Next, let’s take a look at this example from webpack config for using the github/fetch, as described in this article: Using webpack with shims and polyfills

plugins: [
  new webpack.ProvidePlugin({
    'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch'
  })
]

I asked @sokra on gitter:

Can you please tell me if my diagram of how to include fetch via webpack is correct? What I could not find document is how the ProvidePlugin examples seem to take an example of a dependency, like jquery and map it to ‘$’, but I’m not seeing how we go from ‘this’ into fetch. I’m guessing that the format of imports?this=>global is how you convert some object named global into what the ProvidePlugin wants.

Here’s his response on gitter:

imports?this=>global wraps the module into (function() { /* module */ }.call(global))

References

  1. Provide Plugin
  2. Nice explanation of how to use the provide plugin with jQuery
  3. fetch.js source file