Webpack - include css only in development bundle (not production)

Question

When I create my production bundle I do not require any stylesheets in javascript, they are included in index.html. The stylesheets are compiled with a grunt watch from sass to a bundle.css.

While developing I use webpack dev server. Now I want to include the css in the javascript bundle for hot module replacement, but without changing any existing javascript files.

The dev server is using dedicated index.html and webpack.config files, so preferably that's where I include the css bundle. Is this possible?

Maybe it's worth mentioning that I'm using React.

Yes. For the record it works if I simply require bundle.css from my main javascript file. — hansn

John Valentine John Valentine · Accepted Answer · 2016-05-15T00:46:40

Answer: It looks like you can change the entry[] of webpack.config (example), to access a different .js file. Try creating referencing two different .js entry files for your respective webpack.config files, to import a different CSS file or omit the import line entirely. This compromises DRY, but does what you want.
React shouldn't make any difference.
Hot module is a red herring; it's implemented as a plugin, independently of the above:
```
plugins: [
...
    new webpack.HotModuleReplacementPlugin());
],
```
Omitting the CSS module loader in webpack.config.dev wouldn't work.
```
module: {
  loaders: [
...
    {test: /(\.css|\.scss)$/, loaders: ['style', 'css?sourceMap', 'sass?sourceMap']}
  ]
}
```
because it would cause a parse error in import 'path/to/my.css' in index.js

Webpack - include css only in development bundle (not production)

1 Answers