When using entry point, the plugin creates both .js and .css output.

[marquizzo]

I have two files in my project: backgrounds.js and bgStyles.less. I want them to be output into js/scripts.js and css/styles.css, so I'm using the following webpack.config:

var webpack = require("webpack");
var path = require("path");
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
	entry:{
		scripts: "./javascript/backgrounds.js",
		styles: "./less/bgStyles.less"
	},

	output:{
		path: __dirname + "/html/",
		filename: "js/[name].js"
	},

	module:{
		rules: [
			{test: /\.less$/, use: ExtractTextPlugin.extract({
				use: ["css-loader", "less-loader"]
			})}
		]
	},

	plugins:[
		new ExtractTextPlugin({
			filename: "css/[name].css"
		})
	],
}

The configuration file works as expected. The issue is that I get a third output file that is not wanted:

• js/scripts.js
• js/styles.js
• css/styles.css

styles.js simply has the boilerplate Webpack template, and it's useless. I'd like to submit a request to avoid this unnecessary output.

I found a workaround in StackOverflow that suggest I use

include("../../less/bgStyles.less");

at the top of /javascript/backgrounds.js. However, this solution has issues:

• It is much less conspicuous than having the CSS entry point visible in the top project file.
• It doesn't allow the user to establish the a different CSS output filename (for example, having entry point scripts automatically outputs css/scripts.css instead of letting me call it css/styles.css).
• It is more complicated for collaborators to find where the CSS file is being brought in from when it's buried in a JavaScript file.

I'd like to submit a request to let the user establish an entry point to CSS files and avoid outputting this unnecessary third .js file.

[michael-ciniawsky]

webpack natively only understands 'js-ish' files and using a 'css-ish' file as an entry point isn't recommended (imho it should even fail),so you will get a dummy bundle per css entry to 'handle' that. require/import the css inside an entrypoint instead and let extract-text-webpack-plugin emit the CSS file. It removes the CSS from the bundle anyways :)

[hyzhak]

@michael-ciniawsky I got the same problem when was trying to create a library with optional style file. So when I require/import css inside of main.js and someone tries to import this library somewhere else she or he will get style file because it is imported and in the final built.js we get link to the css. So the only way to create dummy entry with dummy js :(
Do you know how to overcome it?

[hyzhak]

btw, here is related issue #518

[fqborges]

I faced the same issue of having a style only entry (css/sass/less) generating an extra .js file, and ended up creating a webpack plugin to remove the js file from the compilation.

I published it on npm as webpack-fix-style-only-entries. You can find the source code on https://github.com/fqborges/webpack-fix-style-only-entries.

:-) shamelessly promoting my package :-)