Revert "Decouple plugins asset building from main Webpack config"

This reverts commit 767c895.

package.json

@@ -28,14 +28,12 @@
     "changelog": "./bin/plugin/cli.js changelog",
     "since": "./bin/plugin/cli.js since",
     "readme": "./bin/plugin/cli.js readme",
-    "build": "npm-run-all 'build:!(plugin)'",
-    "build:optimization-detective": "wp-scripts build -c plugins/optimization-detective/webpack.config.js",
+    "build": "wp-scripts build",
     "build-plugins": "npm-run-all 'build:plugin:!(performance-lab)'",
     "build:plugin:performance-lab": "rm -rf build/performance-lab && mkdir -p build/performance-lab && git archive HEAD | tar -x -C build/performance-lab",
     "build:plugin:auto-sizes": "webpack --mode production --env plugin=auto-sizes",
     "build:plugin:dominant-color-images": "webpack --mode production --env plugin=dominant-color-images",
     "build:plugin:embed-optimizer": "webpack --mode production --env plugin=embed-optimizer",
-    "prebuild:plugin:optimization-detective": "npm run build:optimization-detective",
     "build:plugin:optimization-detective": "webpack --mode production --env plugin=optimization-detective",
     "build:plugin:speculation-rules": "webpack --mode production --env plugin=speculation-rules",
     "build:plugin:webp-uploads": "webpack --mode production --env plugin=webp-uploads",

webpack.config.js

@@ -10,6 +10,7 @@ const CopyWebpackPlugin = require( 'copy-webpack-plugin' );
  */
 const { plugins: standalonePlugins } = require( './plugins.json' );
 const {
+	assetDataTransformer,
 	deleteFileOrDirectory,
 	generateBuildManifest,
 } = require( './bin/webpack/utils' );
@@ -25,6 +26,57 @@ const sharedConfig = {
 	output: {},
 };
 
+// Store plugins that require build process.
+const pluginsWithBuild = [ 'optimization-detective' ];
+
+/**
+ * Webpack Config: Optimization Detective
+ *
+ * @param {*} env Webpack environment
+ * @return {Object} Webpack configuration
+ */
+const optimizationDetective = ( env ) => {
+	if ( env.plugin && env.plugin !== 'optimization-detective' ) {
+		return {
+			entry: {},
+			output: {},
+		};
+	}
+
+	const source = path.resolve( __dirname, 'node_modules/web-vitals' );
+	const destination = path.resolve(
+		__dirname,
+		'plugins/optimization-detective/detection'
+	);
+
+	return {
+		...sharedConfig,
+		name: 'optimization-detective',
+		plugins: [
+			new CopyWebpackPlugin( {
+				patterns: [
+					{
+						from: `${ source }/dist/web-vitals.js`,
+						to: `${ destination }/web-vitals.js`,
+					},
+					{
+						from: `${ source }/package.json`,
+						to: `${ destination }/web-vitals.asset.php`,
+						transform: {
+							transformer: assetDataTransformer,
+							cache: false,
+						},
+					},
+				],
+			} ),
+			new WebpackBar( {
+				name: 'Building Optimization Detective Assets',
+				color: '#2196f3',
+			} ),
+		],
+	};
+};
+
 /**
  * Webpack configuration for building the plugin for distribution.
  * Note: Need to pass plugin name like `--env.plugin=plugin-name` to build particular plugin.
@@ -52,6 +104,9 @@ const buildPlugin = ( env ) => {
 
 	const to = path.resolve( __dirname, 'build', env.plugin );
 	const from = path.resolve( __dirname, 'plugins', env.plugin );
+	const dependencies = pluginsWithBuild.includes( env.plugin )
+		? [ `${ env.plugin }` ]
+		: [];
 
 	return {
 		...sharedConfig,
@@ -65,10 +120,9 @@ const buildPlugin = ( env ) => {
 						globOptions: {
 							dot: true,
 							ignore: [
-								'**/*.[Cc]ache',
 								'**/.wordpress-org',
 								'**/phpcs.xml.dist',
-								'**/webpack.config.js',
+								'**/*.[Cc]ache',
 							],
 						},
 					},
@@ -92,7 +146,8 @@ const buildPlugin = ( env ) => {
 				color: '#4caf50',
 			} ),
 		],
+		dependencies,
 	};
 };
 
-module.exports = [ buildPlugin ];
+module.exports = [ optimizationDetective, buildPlugin ];