Package Exports

webpack-combine-loaders

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (webpack-combine-loaders) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

webpack-combine-loaders

combineLoaders([
  {
    loader: 'css-loader',
    query: {
      modules: true,
      sourceMap: true,
      localIdentName: '[name]__[local]--[hash:base64:5]',
    },
  },
  {
    loader: 'sass-loader',
    query: {
      sourceMap: true,
      includePaths: [
        'app/assets/stylesheets',
        'app/assets/stylesheets/legacy',
      ],
    },
  },
]);
// => 'css-loader?modules=true&sourceMap=true&localIdentName=%5Bname%5D__%5Blocal%5D--%5Bhash%3Abase64%3A5%5D!sass-loader?sourceMap=true&includePaths%5B%5D=app%2Fassets%2Fstylesheets&includePaths%5B%5D=app%2Fassets%2Fstylesheets%2Flegacy'

why?

Say you have multiple loaders being applied to the same file format, and you are using the object syntax for specifying the loader query params (because it's more composable than the string form), but then you need to pass them to a plugin which only understands loaders in their string form (ExtractTextPlugin, I'm looking at you)...

[
  {
    test: /\.scss$/,
    exclude: /node_modules/,
    loader: 'css-loader',
    query: {
      modules: true,
      sourceMap: devBuild,
      localIdentName: '[name]__[local]--[hash:base64:5]',
    },
  },
  {
    test: /\.scss$/,
    exclude: /node_modules/,
      loader: 'sass-loader',
      query: {
        sourceMap: devBuild,
        includePaths: [
          path.resolve('app/assets/stylesheets'),
          path.resolve('app/assets/stylesheets/legacy'),
        ],
      },
    },
  }
]

Instead, make a combined loader like so:

{
  test: /\.scss$/,
  exclude: /node_modules/,
  // multiple css loaders are combined into one because ExtractTextPlugin 
  // only understands loaders in string form :(
  loader: combineLoaders([
    {
      loader: 'css-loader',
      query: {
        modules: true,
        sourceMap: devBuild,
        localIdentName: '[name]__[local]--[hash:base64:5]',
      },
    },
    {
      loader: 'sass-loader',
      query: {
        sourceMap: devBuild,
        includePaths: [
          path.resolve('app/assets/stylesheets'),
          path.resolve('app/assets/stylesheets/legacy'),
        ],
      },
    },
  ]),
}