diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js
index 3a97767e1fc..a7e8ca6aaec 100644
--- a/config/webpack.config.dev.js
+++ b/config/webpack.config.dev.js
@@ -119,14 +119,23 @@ module.exports = {
       // allow it implicitly so we also enable it.
       {
         test: /\.json$/,
+        exclude: /\/manifest\.json$/,
         loader: 'json'
       },
+      // A special case for manifest.json to place it into build root directory.
+      {
+        test: /\/manifest\.json$/,
+        loader: 'file',
+        query: {
+          name: 'manifest.json?[hash:8]'
+        }
+      },
       // "file" loader makes sure those assets get served by WebpackDevServer.
       // When you `import` an asset, you get its (virtual) filename.
       // In production, they would get copied to the `build` folder.
       {
         test: /\.(ico|jpg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
-        exclude: /\/favicon.ico$/,
+        exclude: /\/favicon\.ico$/,
         loader: 'file',
         query: {
           name: 'static/media/[name].[hash:8].[ext]'
@@ -134,7 +143,7 @@ module.exports = {
       },
       // A special case for favicon.ico to place it into build root directory.
       {
-        test: /\/favicon.ico$/,
+        test: /\/favicon\.ico$/,
         include: [paths.appSrc],
         loader: 'file',
         query: {
diff --git a/config/webpack.config.prod.js b/config/webpack.config.prod.js
index af9d35df408..f2536403e8c 100644
--- a/config/webpack.config.prod.js
+++ b/config/webpack.config.prod.js
@@ -130,13 +130,22 @@ module.exports = {
       // allow it implicitly so we also enable it.
       {
         test: /\.json$/,
+        exclude: /\/manifest\.json$/,
         loader: 'json'
       },
+      // A special case for manifest.json to place it into build root directory.
+      {
+        test: /\/manifest\.json$/,
+        loader: 'file',
+        query: {
+          name: 'manifest.json?[hash:8]'
+        }
+      },
       // "file" loader makes sure those assets end up in the `build` folder.
       // When you `import` an asset, you get its filename.
       {
         test: /\.(ico|jpg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
-        exclude: /\/favicon.ico$/,
+        exclude: /\/favicon\.ico$/,
         loader: 'file',
         query: {
           name: 'static/media/[name].[hash:8].[ext]'
@@ -144,7 +153,7 @@ module.exports = {
       },
       // A special case for favicon.ico to place it into build root directory.
       {
-        test: /\/favicon.ico$/,
+        test: /\/favicon\.ico$/,
         include: [paths.appSrc],
         loader: 'file',
         query: {