Merge pull request #125 from ampersarnie/hotfix/swap-minification

Change webpack config from native minification to use TerserPlugin.

example-site/plugins/test-plugin/src/components/DisplayComponent.tsx

@@ -1,22 +1,32 @@
 import SVGAsComponent from '@Static/logo.svg';
 import SVGAsURL from '@Static/svg-file.svg?url';
 import MailIconPNG from '@Static/mail-icon.png';
+import { __, _n, sprintf } from '@wordpress/i18n';
 
 import TestComponent from './TestComponent';
 
 /**
  * Display Component for an example block.
  */
-export default (): JSX.Element => (
-  <>
-    <div className="logo">
-      <SVGAsComponent />
-      <img src={SVGAsURL} alt="Reference and SVG as the url" />
-    </div>
-    <div>Example Block</div>
-    <TestComponent additionalValue="This is not hidden" />
-    <div>
-      <img src={MailIconPNG} alt="PNG Mail Icon for testing usage." />
-    </div>
-  </>
-);
+export default ({ attributes: { itemCount = 2 } }): JSX.Element => {
+  // General comment.
+  // translators: This is some basic alt-text.
+  const svgAlt = __("Reference and SVG as the url", 'test-translation');
+
+  // translators: %d is the number of items chosen.
+  const translatedValue = sprintf(_n("%d item", "%d items", itemCount, 'test-translation'), itemCount);
+
+  return (
+    <>
+      <div className="logo">
+        <SVGAsComponent />
+        <img src={SVGAsURL} alt={svgAlt} />
+      </div>
+      <div>Example Block</div>
+      <TestComponent additionalValue={translatedValue} />
+      <div>
+        <img src={MailIconPNG} alt="PNG Mail Icon for testing usage." />
+      </div>
+    </>
+  );
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbite/build-tools",
-  "version": "1.3.3",
+  "version": "1.4.0",
   "description": "Provides configuration for the Big Bite Build Tools.",
   "author": "Paul Taylor <[email protected]> (https://github.com/ampersarnie)",
   "engines": {
@@ -90,6 +90,7 @@
     "stylelint-webpack-plugin": "^4.1.1",
     "svg-sprite-loader": "^6.0.9",
     "terminal-kit": "^2.1.8",
+    "terser-webpack-plugin": "^5.3.10",
     "ts-loader": "^9.4.2",
     "typescript": "^5.0.4",
     "url-loader": "^4.1.1",

src/commands/build/webpack.js

@@ -1,6 +1,7 @@
 const fs = require('fs');
 const path = require('path');
 const webpack = require('webpack');
+const TerserPlugin = require('terser-webpack-plugin');
 
 const Plugins = require('./plugins');
 const Rules = require('./rules');
@@ -21,7 +22,9 @@ BROWSERSLIST_CONFIG = path.resolve(`${__dirname}/config`);
  */
 module.exports = (__PROJECT_CONFIG__, mode) => {
   const customWebpackConfigFile = __PROJECT_CONFIG__.paths.project + '/webpack.config.js';
-  const customConfig = fs.existsSync(customWebpackConfigFile) ? require(customWebpackConfigFile) : null;
+  const customConfig = fs.existsSync(customWebpackConfigFile)
+    ? require(customWebpackConfigFile)
+    : null;
 
   let webpackConfig = {
     mode,
@@ -49,6 +52,26 @@ module.exports = (__PROJECT_CONFIG__, mode) => {
       maxAssetSize: 500000, // Set max size to 500kb.
     },
 
+    optimization: {
+      minimizer: [
+        new TerserPlugin({
+          parallel: true,
+          terserOptions: {
+            output: {
+              comments: /translators:/i,
+            },
+            compress: {
+              passes: 2,
+            },
+            mangle: {
+              reserved: ['__', '_n', '_nx', '_x'],
+            },
+          },
+          extractComments: false,
+        }),
+      ],
+    },
+
     devtool: mode === 'production' ? 'source-map' : 'inline-cheap-module-source-map',
 
     externals: {