How to conditionally apply different webpack loaders, depending on the source entry? - express

Question

I have a React app built with webpack, I want to ignore css module loading on some conditions.
I have 2 configurations for webpack:
I need to load all css modules for the browser build (not a problem for now)
I need to load css modules for the server only when it's not the Server Side Rendering (SSR) app tree
Here is some pseudo code for illustration (btw the app is an OSS):
// webpack.browser.js (standard build)
{
entry: './client.jsx',
module: { loaders: [ { test: /\.scss$/, loaders: ['style', 'css', 'sass'] } ] },
}
// client.jsx
import App from './src/App.jsx';
// ...App includes styles
// webpack.server.js
{
entry: './server.js',
module: { loaders: [
{
test: /\.scss$/,
loaders: [
// may be conditionally load scss depending on which express middleware the app is builded
]
}
] },
}
// server.js
// ...
import App from './src/App.jsx';
import LandingPage from './src/LandingPage.jsx';
app.use('/app', function ssrMiddleware(req, res) {
// How to not load scss modules ?
const html = ReactDOMServer.renderToStaticMarkup(React.createElement(App));
res.send(html);
});
app.use('/', function websiteMiddleware(req, res) {
// How to load scss modules ?
const html = ReactDOMServer.renderToStaticMarkup(React.createElement(LandingPage));
res.send(html);
});
I'm aware about pithing loader, but I don't understand how it can solves my case.