created plugin

Author: fqborges

README.md

@@ -0,0 +1,52 @@
+# webpack-fix-style-only-entries
+
+This is a small plugin developed to solve the problem of having a style only entry (css/sass/less) generating an extra [name].js file.
+
+You can find more info by reading the following issues:
+
+ - https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/518
+ - https://github.com/webpack-contrib/mini-css-extract-plugin/issues/151
+
+## How it works
+It just find js files from chunks of css only entries and remove the js file rom the compilation.
+
+## How to use
+Require and add to webpack.config plugins.
+
+Warning: this plugin does not load styles or split your bundles, it just fix chunks of css only entries by removing the (almost) empty js file.
+
+```javascript
+// ... other plugins
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const FixStyleOnlyEntriesPlugin = require("webpack-fix-style-only-entries");
+
+module.exports = {
+    entry: {
+        "main" : "./app/main.js"
+        "styles": ["./common/styles.css", "./app/styles.css"]
+    },
+    module: {
+            {
+                test: /\.css$/,
+                use: [
+                    MiniCssExtractPlugin.loader,
+                    'css-loader',
+                ]
+            },
+        ]
+    },
+    plugins: [
+        new FixStyleOnlyEntriesPlugin(),
+        new MiniCssExtractPlugin({
+            filename: "[name].[chunkhash:8].css",
+        }),
+    ],
+};
+```
+
+### Options
+ - extensions: file extensions for styles.
+   - type: Array[string]
+   - default: ["less", "scss", "css"]
+   - optional
+   - Example: to identify only 'foo' and 'bar' extensions as styles: `new FixStyleOnlyEntriesPlugin({ extensions:['foo', 'bar'] }),`

index.js

@@ -0,0 +1,50 @@
+const NAME = "webpack-fix-style-only-entries";
+
+class WebpackFixStyleOnlyEntriesPlugin {
+  constructor(options) {
+    this.apply = this.apply.bind(this);
+
+    options = options || {};
+    let extensions = options.extensions || ["less", "scss", "css"];
+    this.extensions = extensions.map(e => (e[0] === "." ? e : "." + e));
+  }
+
+  apply(compiler) {
+    compiler.hooks.compilation.tap(NAME, compilation => {
+      compilation.hooks.chunkAsset.tap(NAME, (chunk, file) => {
+        if (chunk.hasEntryModule()) {
+          let resources;
+          if (typeof chunk.entryModule.resource == "string") {
+            resources = [chunk.entryModule.resource];
+          } else {
+            if (
+              chunk.entryModule.dependencies &&
+              chunk.entryModule.dependencies.length
+            ) {
+              const modules = chunk.entryModule.dependencies.map(
+                dep => dep.module
+              );
+              resources = modules.map(m => m.resource);
+            }
+          }
+
+          if (resources) {
+            if (
+              resources.every(resource =>
+                this.extensions.find(ext => resource.endsWith(ext))
+              )
+            ) {
+              if (file.endsWith(".js")) {
+                console.log("removing js from style only module: " + file);
+                chunk.files = chunk.files.filter(f => f != file);
+                delete compilation.assets[file];
+              }
+            }
+          }
+        }
+      });
+    });
+  }
+}
+
+module.exports = WebpackFixStyleOnlyEntriesPlugin;

package.json

@@ -0,0 +1,19 @@
+{
+  "name": "webpack-fix-style-only-entries",
+  "version": "0.0.1",
+  "description": "Package to fix style (css/sass/less) only entries generating a extra js file.",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "webpack",
+    "fix",
+    "css",
+    "js",
+    "style"
+  ],
+  "author": "fqborges (https://github.com/fqborges)",
+  "license": "ISC",
+  "repository": "github:fqborges/webpack-fix-style-only-entries"
+}