child-compiler-loader-list-webpack-plugin

With webpack you can set auto loaders for files so they are handled automatically how you want. This plugin solves an intersection between some other plugins and auto loaders that can cause a failure in builds.

A specific use case this was originally written to solve was using html-webpack-plugin to build a static html file that included static html generated by the app that could render while the app loaded its code and any other needed assets. In use with the extract-text-webpack-plugin, the extract plugin would throw an error while webpack compiled the static html. This plugin was written to control the html-webpack-plugin's child compiler's loaders to disable extract's loader. This only disables the extract loader in the child compiler for html-webpack-plugin allowing the extract plugin to still extract the style.

In an example with the above use case this code performs that disable of the extract loader.

Webpack 2

new ChildCompilerLoaderListPlugin({
  test: /html-webpack-plugin/,
  rules: rules
  .filter(function(item) {return item.test.source !== '\\.styl$';})
  .concat({
    test: /\.styl$/,
    loader: 'raw-loader',
  }),
}),

Webpack 1

new ChildCompilerLoaderListPlugin({
  test: /html-webpack-plugin/,
  loaders: loaders
  .filter(function(item) {return item.test.source !== '\\.styl$';})
  .concat({
    test: /\.styl$/,
    loader: 'raw-loader',
  }),
}),