How can I run arbitrary bash scripts on files via Webpack without maintaining loaders for each file type?

Question

It seems like Webpack runs tools that transform code via "loaders", rather than using the APIs of those tools directly. This adds a layer of abstraction over those tools which sometimes means the APIs of the tools is not fully exposed or updates to the tools take time to be updated in the loader. Here's a more detailed description of the problem.

I ran into this problem with Grunt/gulp, and ended up abandoning those in favor of transforming my source directly with bash scripts that I run via npm. Is it possible to do the same thing with Webpack? If so, how?

Unbowed

Answer 1

I created a custom Webpack loader called shell-loader that takes an arbitrary shell script and runs it on the content of each file that it loads using child_process.exec. I can use it like this in webpack.config.js;

{
  test: /.*\.css$/,
  use: [ 'css-loader', { loader: 'shell-loader', options: {
    script: 'postcss --use autoprefixer'
  }} ]
}

It seems to work, as a proof of concept, but I'm not sure if this is a good idea when working with Webpack, or if I'm hacking things together that they weren't meant to be.

Unbowed

Note: while you can use this for running any scripts you want, I wouldn't use this for postcss, since postcss has good Webpack loaders already. github.com/postcss/postcss-loader – Unbowed