lazy-images: Use the new webpack-config package

Mostly as a proof of concept. But I also took the opportunity to clean a few things up: * Name the built JS as ".min.js" like it should be. * Use copy-webpack-plugin to copy the src version of intersection-observer. * Use @wordpress/dependency-extraction-webpack-plugin to handle the cache-buster version in `wp_enqueue_script()`.
Automattic · Oct 20, 2021 · 6c95097 · 6c95097
1 parent ac3ad1c
commit 6c95097
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 58 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/projects/packages/lazy-images/changelog/add-webpack-config-js-package b/projects/packages/lazy-images/changelog/add-webpack-config-js-package
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Update webpack build config.
diff --git a/projects/packages/lazy-images/package.json b/projects/packages/lazy-images/package.json
@@ -16,20 +16,17 @@
 	],
 	"scripts": {
 		"build": "pnpm run install-if-deps-outdated && pnpm run clean && pnpm run build-js",
-		"build-js": "calypso-build && cp ./node_modules/intersection-observer/intersection-observer.js ./dist/intersection-observer.src.js",
+		"build-js": "webpack",
 		"build-production": "pnpm run distclean && pnpm run install-if-deps-outdated && pnpm run build-production-js",
 		"build-production-js": "NODE_ENV=production BABEL_ENV=production pnpm run build-js",
 		"clean": "rm -rf dist",
 		"distclean": "rm -rf node_modules && pnpm run clean",
 		"install-if-deps-outdated": "pnpm install --no-prod --frozen-lockfile"
 	},
-	"dependencies": {
-		"intersection-observer": "0.12.0"
-	},
 	"devDependencies": {
-		"@automattic/calypso-build": "9.0.0",
-		"@wordpress/browserslist-config": "4.1.0",
-		"eslint": "7.32.0",
+		"@automattic/jetpack-webpack-config": "workspace:0.1.0-alpha",
+		"copy-webpack-plugin": "9.0.1",
+		"intersection-observer": "0.12.0",
 		"webpack": "5.51.1"
 	},
 	"engines": {

diff --git a/projects/packages/lazy-images/src/lazy-images.php b/projects/packages/lazy-images/src/lazy-images.php
@@ -32,16 +32,6 @@
  */
 class Jetpack_Lazy_Images {
 
-	/**
-	 * The assets version.
-	 *
-	 * @since 1.0.0
-	 * @since-jetpack 8.8.0
-	 *
-	 * @var string Assets version.
-	 */
-	const ASSETS_VERSION = '1.1.3';
-
 	/**
 	 * Class instance.
 	 *
@@ -495,18 +485,31 @@ private static function build_attributes_string( $attributes ) {
 	 * @return void
 	 */
 	public function enqueue_assets() {
+		$script_path       = Assets::get_file_url_for_environment( '../dist/intersection-observer.min.js', '../dist/intersection-observer.src.js', __FILE__ );
+		$script_asset_path = '../dist/intersection-observer.min.assets.php';
+		$script_asset      = file_exists( $script_asset_path ) ? require $script_asset_path : array(
+			'dependencies' => array(),
+			'version'      => filemtime( $script_path ),
+		);
 		wp_enqueue_script(
 			'jetpack-lazy-images-polyfill-intersectionobserver',
-			Assets::get_file_url_for_environment( '../dist/intersection-observer.js', '../dist/intersection-observer.src.js', __FILE__ ),
-			array(),
-			self::ASSETS_VERSION,
+			$script_path,
+			$script_asset['dependencies'],
+			$script_asset['version'],
 			true
 		);
+
+		$script_path       = Assets::get_file_url_for_environment( '../dist/lazy-images.min.js', 'js/lazy-images.js', __FILE__ );
+		$script_asset_path = '../dist/lazy-images.min.assets.php';
+		$script_asset      = file_exists( $script_asset_path ) ? require $script_asset_path : array(
+			'dependencies' => array(),
+			'version'      => filemtime( $script_path ),
+		);
 		wp_enqueue_script(
 			'jetpack-lazy-images',
-			Assets::get_file_url_for_environment( '../dist/lazy-images.js', 'js/lazy-images.js', __FILE__ ),
-			array( 'jetpack-lazy-images-polyfill-intersectionobserver' ),
-			self::ASSETS_VERSION,
+			$script_path,
+			array_merge( $script_asset['dependencies'], array( 'jetpack-lazy-images-polyfill-intersectionobserver' ) ),
+			$script_asset['version'],
 			true
 		);
 		wp_localize_script(

diff --git a/projects/packages/lazy-images/webpack.config.js b/projects/packages/lazy-images/webpack.config.js
@@ -1,31 +1,43 @@
-/**
- * External dependencies
- */
-const getBaseWebpackConfig = require( '@automattic/calypso-build/webpack.config.js' );
+const jetpackWebpackConfig = require( '@automattic/jetpack-webpack-config/webpack' );
 const path = require( 'path' );
-
-const baseConfig = getBaseWebpackConfig(
-	{ WP: false },
-	{
-		entry: {}, // We'll override later
-		'output-filename': '[name].js',
-		'output-path': path.join( __dirname, './dist' ),
-	}
-);
+const CopyWebpackPlugin = require( 'copy-webpack-plugin' );
 
 module.exports = [
 	{
-		...baseConfig,
+		entry: {
+			'lazy-images': './src/js/lazy-images.js',
+			'intersection-observer': require.resolve( 'intersection-observer/intersection-observer.js' ),
+		},
+		mode: jetpackWebpackConfig.mode,
+		devtool: jetpackWebpackConfig.devtool,
+		output: {
+			...jetpackWebpackConfig.output,
+			path: path.resolve( './dist' ),
+		},
+		optimization: {
+			...jetpackWebpackConfig.optimization,
+		},
 		resolve: {
-			...baseConfig.resolve,
-			modules: [ 'node_modules' ],
+			...jetpackWebpackConfig.resolve,
 		},
-		entry: {
-			'lazy-images': path.join( __dirname, './src/js/lazy-images.js' ),
-			'intersection-observer': path.join(
-				__dirname,
-				'./node_modules/intersection-observer/intersection-observer.js'
-			),
+		node: false,
+		plugins: [
+			...jetpackWebpackConfig.StandardPlugins(),
+			new CopyWebpackPlugin( {
+				patterns: [
+					{
+						from: require.resolve( 'intersection-observer/intersection-observer.js' ),
+						to: 'intersection-observer.src.js',
+					},
+				],
+			} ),
+		],
+		module: {
+			strictExportPresence: true,
+			rules: [
+				// Transpile JavaScript, including node_modules.
+				jetpackWebpackConfig.TranspileRule(),
+			],
 		},
 	},
 ];