WebpackConfigHelpers: getLoadersByName and css-loader

[molily]

WebpackConfigHelpers / Webpack base config feature request

Background: I’d like to modify the behavior of css-loader. I’d like to change the localIdentName in development mode. I’m having a hard time getting and changing to the right rule in the gigantic Webpack loaders structure.

Ideally, I’d like to use …

helpers.getLoadersByName(config, 'css-loader')

But this doesn’t work since css-loader is configured using Webpack-1-style query parameters …

`css-loader?modules&localIdentName=[local]__[hash:base64:5]&importLoaders=1&sourceMap=${isProd}`,

https://github.com/developit/preact-cli/blob/master/src/lib/webpack/webpack-base-config.js#L185

… and the helper only does a === name check:

.filter(({ loader }) => loader === name || (loader && loader.loader === name));

https://github.com/developit/preact-cli/blob/master/src/lib/webpack/transform-config.js#L126

We could use .indexOf(name) === 0 or similar to check whether the string starts with the name.

But I rather propose to consistently use the Webpack-2-style notation in webpack-base-config.js, e.g.

{
  loader: 'css-loader',
  options: {
    modules: true,
    localIdentName: '[local]__[hash:base64:5]',
    importLoaders: 1,
    sourceMap: isProd
  }
},

Then helpers.getLoadersByName(config, 'css-loader') works as expected since the loader === name check matches.

Also it’s simpler to change the loader options, it’s just loader.options.localIdentName = '…'.

What do you think? I can prepare a PR if you agree. Let me know if I missed something.

[thangngoc89]

@molily that's terrific. Usually I just remove the loader completely and add a new one. Please send us a PR and I'll be happy to merge/review it

[reznord]

@molily I totally agree with you on this. Never came across this earlier. Would love a PR on this. :)

[variable-content]

Ditto, would love this to easily disable css modules.