Add ability to use images from node modules (#1334)

Author: frenzzy

tools/lib/overrideRules.js

@@ -0,0 +1,23 @@
+/**
+ * React Starter Kit (https://www.reactstarterkit.com/)
+ *
+ * Copyright © 2014-present Kriasoft, LLC. All rights reserved.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.txt file in the root directory of this source tree.
+ */
+
+function overrideRules(rules, patch) {
+  return rules.map((ruleToPatch) => {
+    let rule = patch(ruleToPatch);
+    if (rule.rules) {
+      rule = { ...rule, rules: overrideRules(rule.rules, patch) };
+    }
+    if (rule.oneOf) {
+      rule = { ...rule, oneOf: overrideRules(rule.oneOf, patch) };
+    }
+    return rule;
+  });
+}
+
+export default overrideRules;

tools/webpack.config.js

@@ -12,13 +12,16 @@ import webpack from 'webpack';
 import AssetsPlugin from 'assets-webpack-plugin';
 import nodeExternals from 'webpack-node-externals';
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
+import overrideRules from './lib/overrideRules';
 import pkg from '../package.json';
 
 const isDebug = !process.argv.includes('--release');
 const isVerbose = process.argv.includes('--verbose');
 const isAnalyze = process.argv.includes('--analyze') || process.argv.includes('--analyse');
 
-const stylesRegExp = /\.(css|less|scss|sss)$/;
+const reScript = /\.jsx?$/;
+const reStyle = /\.(css|less|scss|sss)$/;
+const reImage = /\.(bmp|gif|jpe?g|png|svg)$/;
 const staticAssetName = isDebug ? '[path][name].[ext]?[hash:8]' : '[hash:8].[ext]';
 
 //
@@ -49,8 +52,9 @@ const config = {
     strictExportPresence: true,
 
     rules: [
+      // Rules for JS / JSX
       {
-        test: /\.jsx?$/,
+        test: reScript,
         loader: 'babel-loader',
         include: [
           path.resolve(__dirname, '../src'),
@@ -94,18 +98,32 @@ const config = {
         },
       },
 
-      // Handle internal/project styles (from src folder)
+      // Rules for Style Sheets
       {
-        // Internal Styles
-        test: stylesRegExp,
-        include: [
-          path.resolve(__dirname, '../src'),
-        ],
-        use: [
+        test: reStyle,
+        rules: [
+          // Convert CSS into JS module
           {
-            loader: 'isomorphic-style-loader',
+            issuer: { not: [reStyle] },
+            use: 'isomorphic-style-loader',
           },
+
+          // Process external/third-party styles
           {
+            exclude: path.resolve(__dirname, '../src'),
+            loader: 'css-loader',
+            options: {
+              sourceMap: isDebug,
+              minimize: !isDebug,
+              discardComments: { removeAll: true },
+            },
+          },
+
+          // Process internal/project styles (from src folder)
+          {
+            include: [
+              path.resolve(__dirname, '../src'),
+            ],
             loader: 'css-loader',
             options: {
               // CSS Loader https://github.com/webpack/css-loader
@@ -132,7 +150,7 @@ const config = {
         ],
       },
       {
-        test: stylesRegExp,
+        test: reStyle,
         exclude: [/theme.scss$/],
         use: [
           'isomorphic-style-loader',
@@ -142,43 +160,50 @@ const config = {
         ],
       },
       {
-        test: /\.(bmp|gif|jpe?g|png)$/,
-        issuer: stylesRegExp,
-        loader: 'url-loader',
-        options: {
-          name: staticAssetName,
-          limit: 4096, // 4kb
-        },
-      },
+        test: reImage,
+        oneOf: [
+          // Inline lightweight images into CSS
+          {
+            issuer: reStyle,
+            oneOf: [
+              // Inline lightweight SVGs as UTF-8 encoded DataUrl string
+              {
+                test: /\.svg$/,
+                loader: 'svg-url-loader',
+                options: {
+                  name: staticAssetName,
+                  limit: 4096, // 4kb
+                },
+              },
 
-      // Inline small SVGs into CSS as UTF-8 encoded DataUrl string
-      {
-        test: /\.svg$/,
-        issuer: stylesRegExp,
-        loader: 'svg-url-loader',
-        options: {
-          name: staticAssetName,
-          limit: 4096, // 4kb
-        },
-      },
+              // Inline lightweight images as Base64 encoded DataUrl string
+              {
+                loader: 'url-loader',
+                options: {
+                  name: staticAssetName,
+                  limit: 4096, // 4kb
+                },
+              },
+            ],
+          },
 
-      // Return public URL to large images otherwise
-      {
-        test: /\.(bmp|gif|jpe?g|png|svg)$/,
-        issuer: { not: [stylesRegExp] },
-        loader: 'file-loader',
-        options: {
-          name: staticAssetName,
-        },
+          // Or return public URL to image resource
+          {
+            loader: 'file-loader',
+            options: {
+              name: staticAssetName,
+            },
+          },
+        ],
       },
 
-      // Convert plain text into module
+      // Convert plain text into JS module
       {
         test: /\.txt$/,
         loader: 'raw-loader',
       },
 
-      // Convert markdown into html
+      // Convert Markdown into HTML
       {
         test: /\.md$/,
         loader: path.resolve(__dirname, './lib/markdown-loader.js'),
@@ -188,10 +213,10 @@ const config = {
       // DO NOT FORGET to update `exclude` list when you adding a new loader
       {
         exclude: [
-          /\.jsx?$/,
+          reScript,
+          reStyle,
+          reImage,
           /\.json$/,
-          stylesRegExp,
-          /\.(bmp|gif|jpe?g|png|svg)$/,
           /\.txt$/,
           /\.md$/,
         ],
@@ -346,8 +371,8 @@ const serverConfig = {
   module: {
     ...config.module,
 
-    // Override babel-preset-env configuration for Node.js
-    rules: config.module.rules.map((rule) => {
+    rules: overrideRules(config.module.rules, (rule) => {
+      // Override babel-preset-env configuration for Node.js
       if (rule.loader === 'babel-loader') {
         return {
           ...rule,
@@ -365,6 +390,7 @@ const serverConfig = {
         };
       }
 
+      // Override paths to static assets
       if (rule.loader === 'file-loader' || rule.loader === 'url-loader' || rule.loader === 'svg-url-loader') {
         return {
           ...rule,
@@ -384,7 +410,8 @@ const serverConfig = {
     './assets.json',
     nodeExternals({
       whitelist: [
-        stylesRegExp,
+        reStyle,
+        reImage,
       ],
     }),
   ],

yarn.lock

@@ -2055,13 +2055,13 @@ [email protected]:
   dependencies:
     ms "0.7.3"
 
-[email protected], debug@^2.1.1, debug@^2.2.0, debug@^2.6.0, debug@^2.6.3, debug@^2.6.6:
+[email protected], debug@^2.1.1:
   version "2.6.7"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.7.tgz#92bad1f6d05bbb6bba22cca88bcd0ec894c2861e"
   dependencies:
     ms "2.0.0"
 
-debug@^2.6.8:
+debug@^2.2.0, debug@^2.6.0, debug@^2.6.3, debug@^2.6.6, debug@^2.6.8:
   version "2.6.8"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.8.tgz#e731531ca2ede27d188222427da17821d68ff4fc"
   dependencies:
@@ -4449,7 +4449,7 @@ lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
 
-[email protected], lodash@^4.0.0, lodash@^4.2.0:
+[email protected], lodash@^4.2.0:
   version "4.12.0"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.12.0.tgz#2bd6dc46a040f59e686c972ed21d93dc59053258"
 
@@ -4461,7 +4461,7 @@ lodash@^3.10.1:
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
 
-lodash@^4.1.0, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.4, lodash@^4.3.0, lodash@^4.6.1:
+lodash@^4.0.0, lodash@^4.1.0, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.4, lodash@^4.3.0, lodash@^4.6.1:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
@@ -4685,11 +4685,11 @@ [email protected], minimist@~0.0.1:
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
 
-[email protected], minimist@^1.1.3:
+[email protected]:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.1.3.tgz#3bedfd91a92d39016fcfaa1c681e8faa1a1efda8"
 
-minimist@^1.1.0, minimist@^1.2.0:
+minimist@^1.1.0, minimist@^1.1.3, minimist@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
 
@@ -5818,15 +5818,7 @@ postcss@^5.0.0, postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.
     source-map "^0.5.6"
     supports-color "^3.2.3"
 
-postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.2:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.2.tgz#5c4fea589f0ac3b00caa75b1cbc3a284195b7e5d"
-  dependencies:
-    chalk "^1.1.3"
-    source-map "^0.5.6"
-    supports-color "^3.2.3"
-
-postcss@^6.0.3:
+postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.2, postcss@^6.0.3:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.3.tgz#b7f565b3d956fbb8565ca7c1e239d0506e427d8b"
   dependencies:
@@ -7062,7 +7054,7 @@ sugarss@^0.2.0:
   dependencies:
     postcss "^5.2.4"
 
-[email protected]:
+[email protected], supports-color@^3.1.0:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.1.2.tgz#72a262894d9d408b956ca05ff37b2ed8a6e2a2d5"
   dependencies:
@@ -7072,7 +7064,7 @@ supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
 
-supports-color@^3.1.0, supports-color@^3.1.2, supports-color@^3.2.3:
+supports-color@^3.1.2, supports-color@^3.2.3:
   version "3.2.3"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
   dependencies: