Warns when the user is using special webpack syntax

packages/react-dev-utils/BlockUnsupportedWebpackLoaderSyntax.js

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+// This Webpack plugin forbids usage of special webpack syntax
+// to disable loaders (https://webpack.github.io/docs/loaders.html#loader-order)
+// This makes it very coupled to webpack and might break in the future.
+// See https://github.com/facebookincubator/create-react-app/issues/733.
+
+'use strict';
+
+class BlockUnsupportedWebpackLoaderSyntax {
+  apply(compiler) {
+    compiler.plugin('normal-module-factory', (normalModuleFactory) => {
+      normalModuleFactory.plugin('before-resolve', (data, callback) => {
+        let error = null;
+        if (data.request.match(/^-?!!?/)) {
+          error = `You are requesting '${data.request}'. Special Webpack Loaders syntax is not officially supported and makes you code very coupled to Webpack, which might break in the future, we recommend that you remove it. See https://github.com/facebookincubator/create-react-app/issues/733`;
+        }
+        callback(error, data);
+      });
+    });
+  }
+}
+
+module.exports = BlockUnsupportedWebpackLoaderSyntax;

packages/react-dev-utils/README.md

@@ -81,6 +81,31 @@ module.exports = {
 }
 ```
 
+#### `new BlockUnsupportedWebpackLoaderSyntax()`
+
+This Webpack plugin warns the user when using special webpack syntax for
+disabling loaders (like `!!file!./stuff`). This makes it very coupled
+to webpack special syntax and might break in the future.
+See [#733](https://github.com/facebookincubator/create-react-app/issues/733) for details.
+
+```js
+var path = require('path');
+var BlockUnsupportedWebpackLoaderSyntax = require('react-dev-utils/BlockUnsupportedWebpackLoaderSyntax');
+
+// Webpack config
+module.exports = {
+  // ...
+  plugins: [
+    // ...
+    // This forbids usage of Webpack Special Loader syntax, which makes it
+    // very coupled to Webpack and might break in the future.
+    // See https://github.com/facebookincubator/create-react-app/issues/733
+    new BlockUnsupportedWebpackLoaderSyntax()
+  ],
+  // ...
+}
+```
+
 #### `checkRequiredFiles(files: Array<string>): boolean`
 
 Makes sure that all passed files exist.  

packages/react-scripts/config/webpack.config.dev.js

@@ -17,6 +17,7 @@ var HtmlWebpackPlugin = require('html-webpack-plugin');
 var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 var WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
+var BlockUnsupportedWebpackLoaderSyntax = require('react-dev-utils/BlockUnsupportedWebpackLoaderSyntax');
 var getClientEnvironment = require('./env');
 var paths = require('./paths');
 
@@ -216,7 +217,11 @@ module.exports = {
     // to restart the development server for Webpack to discover it. This plugin
     // makes the discovery automatic so you don't have to restart.
     // See https://github.com/facebookincubator/create-react-app/issues/186
-    new WatchMissingNodeModulesPlugin(paths.appNodeModules)
+    new WatchMissingNodeModulesPlugin(paths.appNodeModules),
+    // This forbids usage of Webpack Special Loader syntax, which makes it
+    // very coupled to Webpack and might break in the future.
+    // See https://github.com/facebookincubator/create-react-app/issues/733
+    new BlockUnsupportedWebpackLoaderSyntax()
   ],
   // Some libraries import Node modules but don't use them in the browser.
   // Tell Webpack to provide empty mocks for them so importing them works.