Added configuration and updated README with steps

Author: lfre

.gitignore

@@ -59,3 +59,6 @@ typings/
 
 # next.js build output
 .next
+
+# dist folder
+dist

README.md

@@ -1,2 +1,8 @@
 # mini-css-extract-plugin-contenthash
+
 Displays the issue with contenthash in webpack plugin
+
+- Run `yarn build` or `npm run build`
+- Comment out `file2` from entry
+- Run `build` again
+- Notice how `file3.css` is created with a new hash when the contents have not changed

package.json

@@ -0,0 +1,21 @@
+{
+  "name": "mini-css-extract-plugin-contenthash",
+  "version": "1.0.0",
+  "description": "Displays the issue with contenthashes in webpack plugin",
+  "main": "index.js",
+  "repository": "https://github.com/lfre/mini-css-extract-plugin-contenthash",
+  "author": "Alfredo Lopez",
+  "license": "MIT",
+  "private": false,
+  "scripts": {
+    "build": "webpack"
+  },
+  "devDependencies": {
+    "css-loader": "^1.0.0",
+    "mini-css-extract-plugin": "^0.4.3",
+    "node-sass": "^4.9.3",
+    "sass-loader": "^7.1.0",
+    "webpack": "^4.19.1",
+    "webpack-cli": "^3.1.0"
+  }
+}

src/file1.scss

@@ -0,0 +1,3 @@
+body {
+  background-color: red;
+}

src/file2.scss

@@ -0,0 +1,3 @@
+body {
+  background-color: blue;
+}

src/file3.scss

@@ -0,0 +1,3 @@
+body {
+  background-color: yellow;
+}

webpack.config.js

@@ -0,0 +1,40 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+module.exports = {
+  entry: {
+    file1: './src/file1.scss',
+    /*
+       To display the issue, comment out file2 entry, the contenthash of file3 will change when it shouldn't.
+       This is due to: https://github.com/webpack/webpack/blob/master/lib/Module.js#L311
+       Possible fix:
+         - Assign a consistent id (this.id) to CSSModule https://github.com/webpack-contrib/mini-css-extract-plugin/blob/master/src/index.js#L42
+           such as `dependency.context`
+    */
+    file2: './src/file2.scss',
+    file3: './src/file3.scss',
+  },
+  mode: 'development',
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: '[name].[contenthash].css',
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.scss$/,
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+          },
+          {
+            loader: 'css-loader', // translates CSS into CommonJS
+          },
+          {
+            loader: 'sass-loader', // compiles Sass to CSS
+          },
+        ],
+      },
+    ],
+  },
+};