PR feedback: Replace "file-loader" with asset modules, and update the…

… sample project to illustrate usage

build-tests-samples/heft-web-rig-app-tutorial/package.json

@@ -22,6 +22,7 @@
     "@types/heft-jest": "1.0.1",
     "@types/react-dom": "16.9.14",
     "@types/react": "16.14.23",
+    "@types/webpack-env": "1.13.0",
     "typescript": "~4.5.2"
   }
 }

build-tests-samples/heft-web-rig-app-tutorial/src/ExampleApp.tsx

@@ -9,17 +9,19 @@ export class ExampleApp extends React.Component {
     const appStyle: React.CSSProperties = {
       backgroundColor: '#ffffff',
       padding: '20px',
+      margin: '20px',
       borderRadius: '5px',
       width: '400px'
     };
 
     return (
-      <div style={{ padding: '20px' }}>
-        <div style={appStyle}>
-          <h2>Hello, world!</h2>
-          Here is an example control:
-          <ToggleSwitch leftColor={'#800000'} rightColor={'#008000'} onToggle={this._onToggle} />
-        </div>
+      <div style={appStyle}>
+        <h2>Hello, world!</h2>
+        <p>Here is an example control:</p>
+        <ToggleSwitch leftColor={'#800000'} rightColor={'#008000'} onToggle={this._onToggle} />
+
+        <p>Here is an example image:</p>
+        <img src={require('./example-image.png')} />
       </div>
     );
   }

build-tests-samples/heft-web-rig-app-tutorial/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "extends": "./node_modules/@rushstack/heft-web-rig/profiles/app/tsconfig-base.json",
   "compilerOptions": {
-    "types": ["heft-jest"]
+    "types": ["heft-jest", "webpack-env"]
   }
 }

build-tests-samples/heft-web-rig-library-tutorial/package.json

@@ -24,6 +24,7 @@
     "@types/heft-jest": "1.0.1",
     "@types/react-dom": "16.9.14",
     "@types/react": "16.14.23",
+    "@types/webpack-env": "1.13.0",
     "typescript": "~4.5.2"
   }
 }

build-tests-samples/heft-web-rig-library-tutorial/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "extends": "./node_modules/@rushstack/heft-web-rig/profiles/app/tsconfig-base.json",
   "compilerOptions": {
-    "types": ["heft-jest"]
+    "types": ["heft-jest", "webpack-env"]
   }
 }

rigs/heft-web-rig/shared/webpack-base.config.js

@@ -193,8 +193,8 @@ function createWebpackConfig({ env, argv, projectRoot, configOverride }) {
           test: /\.(jpeg|jpg|png|gif|svg|ico)$/,
           // Allows import/require() to be used with an asset file. The file will be copied to the output folder,
           // and the import statement will return its URL.
-          // https://www.npmjs.com/package/file-loader
-          loader: 'file-loader'
+          // https://webpack.js.org/guides/asset-modules/#resource-assets
+          type: 'asset/resource'
         }
       ]
     },