feat(options): add moduleFilename option (#381)

Author: kevinchappell

Diff for: README.md

@@ -342,6 +342,16 @@ module.exports = {
 };
 ```
 
+#### Module Filename Option
+
+With the `moduleFilename` option you can use chunk data to customize the filename. This is particularly useful when dealing with multiple entry points and wanting to get more control out of the filename for a given entry point/chunk. In the example below, we'll use `moduleFilename` to output the generated css into a different directory.
+
+```javascript
+const miniCssExtractPlugin = new MiniCssExtractPlugin({
+  moduleFilename: ({ name }) => `${name.replace('/js/', '/css/')}.css`
+})
+```
+
 #### Long Term Caching
 
 For long term caching use `filename: "[contenthash].css"`. Optionally add `[name]`.

Diff for: package-lock.json

@@ -17,6 +17,7 @@ const REGEXP_CHUNKHASH = /\[chunkhash(?::(\d+))?\]/i;
 const REGEXP_CONTENTHASH = /\[contenthash(?::(\d+))?\]/i;
 const REGEXP_NAME = /\[name\]/i;
 const REGEXP_PLACEHOLDERS = /\[(name|id|chunkhash)\]/g;
+const DEFAULT_FILENAME = '[name].css';
 
 class CssDependency extends webpack.Dependency {
   constructor(
@@ -122,7 +123,8 @@ class MiniCssExtractPlugin {
   constructor(options) {
     this.options = Object.assign(
       {
-        filename: '[name].css',
+        filename: DEFAULT_FILENAME,
+        moduleFilename: () => options.filename || DEFAULT_FILENAME,
       },
       options
     );
@@ -195,7 +197,8 @@ class MiniCssExtractPlugin {
                   renderedModules,
                   compilation.runtimeTemplate.requestShortener
                 ),
-              filenameTemplate: this.options.filename,
+              filenameTemplate: ({ chunk: chunkData }) =>
+                this.options.moduleFilename(chunkData),
               pathOptions: {
                 chunk,
                 contentHashType: MODULE_TYPE,

Diff for: src/index.js

@@ -0,0 +1,2 @@
+body { background: purple; }
+

Diff for: test/cases/moduleFilename/expected/demo/css/main.css

@@ -0,0 +1 @@
+import './style.css';

Diff for: test/cases/moduleFilename/index.js

@@ -0,0 +1 @@
+body { background: purple; }

Diff for: test/cases/moduleFilename/style.css

@@ -0,0 +1,23 @@
+const Self = require('../../../');
+
+module.exports = {
+  entry: {
+    'demo/js/main': './index.js',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [Self.loader, 'css-loader'],
+      },
+    ],
+  },
+  output: {
+    filename: '[name].js',
+  },
+  plugins: [
+    new Self({
+      moduleFilename: ({ name }) => `${name.replace('/js/', '/css/')}.css`,
+    }),
+  ],
+};