build: fix more sourcemap problems

This commit fixes a remaining handful of sourcemap issues remaining
after my previous sourcemap-related PRs aws-amplify#3059 and aws-amplify#2680:
* adds mapping for new folders: predictions, datastore,
  amplify-ui-angular, amplify-ui-components, amplify-ui-react,
  amplify-ui-storybook, amplify-ui-vue, api-graphql, api-rest
* removes webpack:/// prefix from oddball, non-file paths emitted by
  webpack (e.g. `webpack/universalModuleDefinition` or `fs (ignored)`).
  This prevents warnings from source-map-loader and related tools.
* The same code that fixes the "weird path" fix above also fixes a
  problem with aws-amplify#3059 where it would pre-pend webpack:/// as a
  fall-through case, even when the path was already a valid relative URL
  and didn't need that prefix. Also, according to @loganfsmyth (the most
  knowledgeable sourcemap expert I know), OSS library sourcemaps
  should always use relative URLs and should never use the
  webpack:/// prefix. Therefore, this PR removes that prefix.
  * updates the amplify-ui package's webpack config to emit sourcemaps
  * fixes paths to CSS files in the sourcemaps of amplify-ui package
  * adds sourcemaps for aws-amplify-vue package

packages/amplify-ui/webpack.config.js

@@ -34,6 +34,7 @@ module.exports = {
 						loader: MiniCssExtractPlugin.loader,
 						options: {
 							hmr: process.env.NODE_ENV === 'development',
+							sourceMap: true,
 						},
 					},
 					{
@@ -48,10 +49,16 @@ module.exports = {
 						options: {
 							modules: true,
 							importLoaders: 1,
+							sourceMap: true,
 							localIdentName: '[name]__[local]___[hash:base64:5]',
 						},
 					},
-					'postcss-loader',
+					{
+						loader: 'postcss-loader',
+						options: {
+							sourceMap: true,
+						},
+					},
 				],
 			},
 		],

packages/aws-amplify-vue/babel.config.js

@@ -1,3 +1,5 @@
 module.exports = {
 	presets: [['@vue/app', { useBuiltIns: 'entry' }]],
+	sourceMaps: true,
+	inputSourceMap: true,
 };

packages/aws-amplify-vue/vue.config.js

@@ -23,4 +23,8 @@ module.exports = {
     */
 		extract: false,
 	},
+	configureWebpack: config => {
+		config.devtool = 'source-map';
+		config.output.devtoolModuleFilenameTemplate = require('../aws-amplify/webpack-utils').devtoolModuleFilenameTemplate;
+	},
 };

packages/aws-amplify/webpack-utils.js

@@ -28,8 +28,15 @@
 const packageFolderMap = {
 	'amazon-cognito-identity-js': 'amazon-cognito-identity-js',
 	'amplify-ui': '@aws-amplify/ui',
+	'amplify-ui-angular': '@aws-amplify/ui-',
+	'amplify-ui-components': '@aws-amplify/ui-components',
+	'amplify-ui-react': '@aws-amplify/ui-react',
+	'amplify-ui-storybook': '@aws-amplify/ui-storybook',
+	'amplify-ui-vue': '@aws-amplify/ui-vue',
 	analytics: '@aws-amplify/analytics',
 	api: '@aws-amplify/api',
+	'api-graphql': '@aws-amplify/api-graphql',
+	'api-rest': '@aws-amplify/api-rest',
 	auth: '@aws-amplify/auth',
 	'aws-amplify': 'aws-amplify',
 	'aws-amplify-angular': 'aws-amplify-angular',
@@ -41,15 +48,15 @@ const packageFolderMap = {
 	datastore: '@aws-amplify/datastore',
 	interactions: '@aws-amplify/interactions',
 	pubsub: '@aws-amplify/pubsub',
+	predictions: '@aws-amplify/predictions',
 	pushnotification: '@aws-amplify/pushnotification',
 	storage: '@aws-amplify/storage',
 	xr: '@aws-amplify/xr',
 };
 
 const folders = Object.keys(packageFolderMap);
 const nodeModules = '/node_modules/';
-const webpackPrefix = 'webpack:///';
-const webpackNodeModules = webpackPrefix + '.' + nodeModules;
+const webpackNodeModules = '~/';
 
 function devtoolModuleFilenameTemplate(info) {
 	const resource = info.resource;
@@ -60,8 +67,7 @@ function devtoolModuleFilenameTemplate(info) {
 		const after = start + nodeModules.length;
 		return webpackNodeModules + resource.substring(after);
 	} else if (resource.includes('../')) {
-		// handle relative paths to other packages in this monorepo by converting them into absolute
-		// paths pointing at node_modules
+		// handle relative paths to other packages in this monorepo
 		for (let i = 0; i < folders.length; i++) {
 			const folder = folders[i];
 			const relative = '../' + folder;
@@ -75,9 +81,25 @@ function devtoolModuleFilenameTemplate(info) {
 				);
 			}
 		}
+	} else if (resource.startsWith('./')) {
+		// The only time we get here is when there's a bug in the toolchain upstream
+		// from us that causes imported files (I've seen this only for CSS files and
+		// package.json) to have paths that are relative to the package root instead
+		// of being relative to the /dist or /lib output folder. Fix this by
+		// prefixing with an extra dot.
+		return '.' + resource;
 	}
-	// fall-through (e.g. relative paths in this package, webpack builtins, unknown package paths)
-	return webpackPrefix + resource;
+
+	// If we get here, the resource is one of these cases:
+	//   1) a relative path to a parent folder, e.g. '../src/foo.js'
+	//   2) a plain filename (no path), e.g. 'foo.min.js'
+	//   3) one of the invalid paths that webpack itself adds, e.g.
+	//      'webpack/universalModuleDefinition', or 'webpack/bootstrap
+	//      21c2cca6cf7a65b395b7' (the space is actually included by webpack!)
+	//   4) node-only modules that are ignored on the browser, e.g. 'fs (ignored)'
+	//      For all these cases, it's fine to just use the same input path. No
+	//      transforms needed.
+	return resource;
 }
 
 module.exports = {