diff --git a/src/index.js b/src/index.js
index 4e40986c..89219f59 100644
--- a/src/index.js
+++ b/src/index.js
@@ -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,
+        filenameTemplate: () => options.filename || DEFAULT_FILENAME,
       },
       options
     );
@@ -195,8 +197,8 @@ class MiniCssExtractPlugin {
                   renderedModules,
                   compilation.runtimeTemplate.requestShortener
                 ),
-              filenameTemplate:
-                this.options.filenameTemplate || this.options.filename,
+              filenameTemplate: ({ chunk: chunkData }) =>
+                this.options.filenameTemplate(chunkData),
               pathOptions: {
                 chunk,
                 contentHashType: MODULE_TYPE,
diff --git a/test/cases/filenameTemplate/webpack.config.js b/test/cases/filenameTemplate/webpack.config.js
index f456751f..547f0e32 100644
--- a/test/cases/filenameTemplate/webpack.config.js
+++ b/test/cases/filenameTemplate/webpack.config.js
@@ -17,8 +17,7 @@ module.exports = {
   },
   plugins: [
     new Self({
-      filenameTemplate: ({ chunk }) =>
-        `${chunk.name.replace('/js/', '/css/')}.css`,
+      filenameTemplate: ({ name }) => `${name.replace('/js/', '/css/')}.css`,
     }),
   ],
 };