Webpack generate unnecessary styles.js file with css entry

[laozhu]

I have two entry, one for javascript bundling, one for css bundling, I use this plugin for extracting css, everything is OK except generating a unnecessary styles.af6d7e48e7.js file in my dist/js folder.

Environment

- macOS 10.13.3
- node v9.6.1
- yarn v1.3.2

Webpack entry

PATH.entry = {
  bundle: './src/index.js',
  styles: './src/styles/main.css',
};

Dist structure

ritchie at MacBook-Air in ~/D/W/w/dist
↪ tree
.
├── css
│   ├── styles.af6d7e48e7.css
│   └── styles.af6d7e48e7.css.map
├── favicon.ico
├── fonts
│   ├── lobster.58a4085516.woff2
│   └── lobster.e7f8a498bc.woff
├── img
│   └── logo.89088456bc.png
├── index.html
├── js
│   ├── bundle.32992ee976.js
│   ├── bundle.32992ee976.js.map
│   ├── dll.manifest.json
│   ├── styles.af6d7e48e7.js
│   ├── styles.af6d7e48e7.js.map
│   ├── vendor.decae7f1b9.dll.js
│   ├── vendor.decae7f1b9.dll.js.map
│   └── vendor.dll.manifest.json
├── manifest.json
└── robots.txt

I use webpack-manifest-plugin to generat assets manifest.json for backend reference, the unnecessary styles.af6d7e48e7.js is in the manifest.json. I can't use filter to remove files like styles.af6d7e48e7.js because the output filename is depending on entry name.

Example repo

laozhu/wsk

Clone the example repo and run yarn install and yarn start will get the same dist structure above.

My problem

Any idea for not generating files like styles.af6d7e48e7.js, or remove these unnecessary files from dist and manifest.json?

[sokra]

Your example doesn't use this plugin

[laozhu]

@sokra I am so sorry for that, I have not commit and push it to remote repo, now the example is using this plugin and run well with yarn start.

[ingro]

Not sure if I should comment here since it's already closed but I do register the same behavior, that's not a big deal indeed, but I always get a style.js file along style.css

[michael-ciniawsky]

You can't use a .css file as an entrypoint, this will generate a .js file. import the CSS file in
the JS entrypoint instead

entry.js

import style from './entry.css' 

[ingro]

Well thanks Michael, that was embarrassing, I created the style entry point to better debug some issue while migrating from webpack 3 to 4 and forgot about that!