diff --git a/README.md b/README.md
index 72c21d77..955ffb86 100644
--- a/README.md
+++ b/README.md
@@ -90,9 +90,9 @@ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 module.exports = {
   plugins: [
     new MiniCssExtractPlugin({
-      // Options similar to the same options in webpackOptions.output
-      // both options are optional
-      filename: "[name].css",
+      // Filename includes [path] so we use the publicPath function (below) to dynamically
+      // create publicPath relative to the source CSS file.
+      filename: "[path]/[name].css",
       chunkFilename: "[id].css"
     })
   ],
diff --git a/test/cases/function-publicpath/webpack.config.js b/test/cases/function-publicpath/webpack.config.js
index 30b243df..51323b7c 100644
--- a/test/cases/function-publicpath/webpack.config.js
+++ b/test/cases/function-publicpath/webpack.config.js
@@ -29,7 +29,7 @@ module.exports = {
   },
   plugins: [
     new Self({
-      filename: '[name].css',
+      filename: '[path]/[name].css',
     }),
   ],
 };