Save unminified .js sources before minimizer runs

WordPress · fullofcaffeine · Jun 10, 2021 · May 12, 2021 · May 12, 2021 · May 20, 2021
commit 0344474f8cc19498f42dba59bd0e32e2c81f15cb
diff --git a/add-readable-js-assets-webpack-plugin.js b/add-readable-js-assets-webpack-plugin.js
@@ -1,53 +1,36 @@
 /**
  * External dependencies
  */
-const TerserPlugin = require( 'terser-webpack-plugin' );
+const fs = require( 'fs' );
 
-//@todo Name needs to change because this also minimizes the files
 class AddReadableJsAssetsWebpackPlugin {
-	constructor( { mode } ) {
-		this.terserPlugin = new TerserPlugin( {
-			test: /\.min\.js$/,
-			cache: true,
-			parallel: true,
-			sourceMap: mode !== 'production',
-			terserOptions: {
-				output: {
-					comments: /translators:/i,
-				},
-				compress: {
-					passes: 2,
-				},
-				mangle: {
-					reserved: [ '__', '_n', '_nx', '_x' ],
-				},
-			},
-			extractComments: false,
+	extractUnminifiedFiles( compilation ) {
+		const files = compilation.chunks.flatMap( ( chunk ) => chunk.files );
+		compilation.unminifiedAssets = files.map( ( file ) => {
+			const asset = compilation.assets[ file ];
+			const unminifiedFile = file.replace( /\.min\.js$/, '.js' );
+			return [ unminifiedFile, asset.source() ];
 		} );
 	}
+	async writeUnminifiedFiles( compilation ) {
+		for ( const [ file, source ] of compilation.unminifiedAssets ) {
+			await fs.promises.writeFile( file, source );
+		}
+	}
 	apply( compiler ) {
-		// For some reason, webpack still includes the terser minifier even after I
-		// removed it from the main webpack.config.js, not sure where it's
-		// coming from, so as a temporary hack until I find out, I forcedly remove it
-		compiler.options.optimization.minimizer = [];
-		compiler.hooks.emit.tap( this.constructor.name, ( compilation ) => {
-			const readableJsAssets = Object.keys( compilation.assets )
-				.filter( ( assetPath ) => assetPath.match( /\.min.js$/ ) )
-				.reduce( ( acc, assetPath ) => {
-					acc[ assetPath.replace( /\.min/, '' ) ] =
-						compilation.assets[ assetPath ];
-					return acc;
-				}, {} );
-
-			if ( compiler.options.optimization.minimize ) {
-				// This doesn't work :(. I guess because we're already too late
-				// in the hooks flow and terser doesn't have a chance to when it
-				// sets up its hook "taps".
-				this.terserPlugin.apply( compiler );
+		compiler.hooks.compilation.tap(
+			this.constructor.name,
+			( compilation ) => {
+				compilation.hooks.additionalAssets.tap(
+					this.constructor.name,
+					() => this.extractUnminifiedFiles( compilation )
+				);
 			}
-
-			compilation.assets = { ...compilation.assets, ...readableJsAssets };
-		} );
+		);
+		compiler.hooks.afterEmit.tapPromise(
+			this.constructor.name,
+			( compilation ) => this.writeUnminifiedFiles( compilation )
+		);
 	}
 }
 

diff --git a/webpack.config.js b/webpack.config.js
@@ -4,6 +4,7 @@
 const { BundleAnalyzerPlugin } = require( 'webpack-bundle-analyzer' );
 const { DefinePlugin } = require( 'webpack' );
 const CopyWebpackPlugin = require( 'copy-webpack-plugin' );
+const TerserPlugin = require( 'terser-webpack-plugin' );
 const postcss = require( 'postcss' );
 const { escapeRegExp, compact } = require( 'lodash' );
 const { sep } = require( 'path' );
@@ -15,6 +16,11 @@ const fastGlob = require( 'fast-glob' );
 const CustomTemplatedPathPlugin = require( '@wordpress/custom-templated-path-webpack-plugin' );
 const LibraryExportDefaultPlugin = require( '@wordpress/library-export-default-webpack-plugin' );
 const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' );
+
+/**
+ * Internal dependencies
+ */
+const AddReadableJsAssetsWebpackPlugin = require( './add-readable-js-assets-webpack-plugin' );
 const {
 	camelCaseDash,
 } = require( '@wordpress/dependency-extraction-webpack-plugin/lib/util' );
@@ -23,7 +29,6 @@ const {
  * Internal dependencies
  */
 const { dependencies } = require( './package' );
-const AddReadableJsAssetsWebpackPlugin = require( './add-readable-js-assets-webpack-plugin' );
 
 const {
 	NODE_ENV: mode = 'development',
@@ -111,6 +116,25 @@ module.exports = {
 		// Only concatenate modules in production, when not analyzing bundles.
 		concatenateModules:
 			mode === 'production' && ! process.env.WP_BUNDLE_ANALYZER,
+		minimizer: [
+			new TerserPlugin( {
+				cache: true,
+				parallel: true,
+				sourceMap: mode !== 'production',
+				terserOptions: {
+					output: {
+						comments: /translators:/i,
+					},
+					compress: {
+						passes: 2,
+					},
+					mangle: {
+						reserved: [ '__', '_n', '_nx', '_x' ],
+					},
+				},
+				extractComments: false,
+			} ),
+		],
 	},
 	mode,
 	entry: createEntrypoints(),
@@ -120,7 +144,6 @@ module.exports = {
 			const { chunk } = data;
 			const { entryModule } = chunk;
 			const { rawRequest } = entryModule;
-
 			/*
 			 * If the file being built is a Core Block's frontend file,
 			 * we build it in the block's directory.