Webpack updates, part 2

dist/388.9557b9f6869a693261d8.js.LICENSE.txt

@@ -0,0 +1,3 @@
+/*! Magnific Popup - v1.1.0 - 2016-02-20
+* http://dimsemenov.com/plugins/magnific-popup/
+* Copyright (c) 2016 Dmitry Semenov; */

dist/assets.json

@@ -0,0 +1 @@
+{"388.9557b9f6869a693261d8.js":{"dependencies":[],"version":"7e71eccf0dc66ad47371"},"common.07c672c5fbadf7b78d2a.js":{"dependencies":["jquery"],"version":"dd232014ac60701cd53b"}}

dist/manifest.json

@@ -0,0 +1,5 @@
+{
+  "common.js": "common.07c672c5fbadf7b78d2a.js",
+  "388.js": "388.9557b9f6869a693261d8.js",
+  "assets.json": "assets.json"
+}

functions.php

@@ -70,13 +70,19 @@ function remove_dashboard_widgets() {
     add_action('wp_dashboard_setup', 'remove_dashboard_widgets');
 
     add_action('wp_enqueue_scripts', function() {
-        //Enqueue our own project-specific JavaScript, including dependencies.
-        $this->enqueue_script(
-            'project-common',
-            'common.js',
-            ['jquery'],
-            ['file' => 'scripts.version']
-        );
+        $file = file_get_contents(__DIR__ . '/dist/manifest.json');
+
+        $manifest = json_decode($file, true) ?? [];
+
+        foreach ($manifest as $entrypoint => $filename) {
+            # Enqueue the file
+            //Enqueue our own project-specific JavaScript, including dependencies.
+            $this->enqueue_script(
+                    $entrypoint,
+                    $filename,
+                    ['jquery'],
+                );
+        }
 
         $this->enqueue_style('project-css', 'style.css', [], ['file' => 'styles.version']);
         $this->enqueue_style('project-print-css', 'print.css', [], ['file' => 'styles.version'], 'print');

package.json

@@ -21,10 +21,16 @@
   },
   "license": "MIT",
   "dependencies": {
+    "@wordpress/dependency-extraction-webpack-plugin": "^4.24.0",
     "fitvids.1.1.0": "^1.1.0",
-    "jquery": "^3.7.0",
     "magnific-popup": "^1.1.0",
     "swiper": "^9.3.2",
-    "throttle-debounce": "^5.0.0"
+    "throttle-debounce": "^5.0.0",
+    "webpack-manifest-plugin": "^5.0.0"
+  },
+  "scripts": {
+    "dev": "webpack --mode=development",
+    "dev:watch": "webpack --mode=development --watch",
+    "build": "webpack --mode=production"
   }
 }

scripts.version

@@ -1 +1 @@
-a9d0420aebb30c16e102
+95093804be8d75665dfa

webpack.config.js

@@ -12,133 +12,150 @@
  *
  * Learn more: https://webpack.js.org/concepts/
  */
-const path = require('path')
-const webpack = require('webpack');
+const path = require("path");
+const webpack = require("webpack");
 
 const MiniCssExtractPlugin = require("mini-css-extract-plugin"); //extracts css from js into css
 const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
 
-const DeleteAfterBuildPlugin = require('./js/webpack-plugins/delete-after-build-plugin.js')
-const AssetsVersionPlugin = require('./js/webpack-plugins/assets-version-plugin.js')
-const getThemePath = require('./js/webpack-plugins/get-theme-path.js');
+const DeleteAfterBuildPlugin = require("./js/webpack-plugins/delete-after-build-plugin.js");
+const AssetsVersionPlugin = require("./js/webpack-plugins/assets-version-plugin.js");
+const getThemePath = require("./js/webpack-plugins/get-theme-path.js");
+const { WebpackManifestPlugin } = require("webpack-manifest-plugin");
+const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' );
+
 
 const sharedConfig = {
-    mode: 'production',
-    devtool: 'source-map',
-    stats: 'errors-only',
-}
+  mode: "production",
+  devtool: "source-map",
+  stats: "errors-only",
+};
 
 const jsConfig = Object.assign({}, sharedConfig, {
-    entry: {
-        /*
-        * will tell Webpack to parse js/src/common.js when you run
-        * `webpack` and compile it to dist/common.js.
-        */
-        common: './js/src/common.js',
-    },
-    output: {
-        /*
-         * Here, the [name] part corresponds to the `common` keys
-         * in the `entry` object above. In most cases you shouldn't have to change
-         * this part to add new bundles.
-         */
-        filename: '[name].js',
+  entry: {
+    /*
+     * will tell Webpack to parse js/src/common.js when you run
+     * `webpack` and compile it to dist/common.js.
+     */
+    common: "./js/src/common.js",
+  },
+  output: {
+    /*
+     * Here, the [name] part corresponds to the `common` keys
+     * in the `entry` object above. In most cases you shouldn't have to change
+     * this part to add new bundles.
+     */
+    filename: "[name].[contenthash].js",
+    clean: true,
+  },
+  /*
+   * Tell Webpack that jQuery is a thing that exists globally.
+   */
+  externals: {
+    jquery: "jQuery",
+  },
+  optimization: {
+    splitChunks: {
+      chunks: 'all',
     },
-    plugins: [
-        /*
-        * The AssetsVersionPlugin produces an extra file called assets.version
-        * which WordPress uses to tell end-users' browsers to load new versions
-        * of our frontend code using a technique called cache-busting.
-        *
-        * Learn more: https://www.sitecrafting.com/issues-cached-css-js-files-wordpress/
-        */
-        new AssetsVersionPlugin({
-            versionFile: 'scripts.version',
-            useHash: true,
-        }),
-        /*
-        * Tell Webpack that jQuery is a thing that exists globally.
-        */
-        new webpack.ProvidePlugin({
-            '$': 'jquery',
-            'jQuery': 'jquery',
-            'window.jQuery': 'jquery',
-        }),
+  },
+  plugins: [
+    /*
+     * The AssetsVersionPlugin produces an extra file called assets.version
+     * which WordPress uses to tell end-users' browsers to load new versions
+     * of our frontend code using a technique called cache-busting.
+     *
+     * Learn more: https://www.sitecrafting.com/issues-cached-css-js-files-wordpress/
+     */
+    new AssetsVersionPlugin({
+      versionFile: "scripts.version",
+      useHash: true,
+    }),
+    new WebpackManifestPlugin({
+        publicPath : '',
+        filter: (file) => {
+            //console.log(file.name.endsWith('.map'))
+            return !file.name.endsWith('.map');
+        }
+    }),
+    new DependencyExtractionWebpackPlugin({
+        outputFormat: 'json',
+        combineAssets: true,
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: "babel-loader",
+            options: {
+              presets: ["@babel/preset-env"],
+            },
+          },
+        ],
+      },
     ],
-    module: {
-        rules: [
-            {
-                test: /\.js$/,
-                exclude: /node_modules/,
-                use: [
-                    {
-                        loader: 'babel-loader',
-                        options: {
-                            presets: ['@babel/preset-env'],
-                        }
-                    }
-                ]
-            }
-        ]
-    }
+  },
 });
 
 const cssConfig = Object.assign({}, sharedConfig, {
+  /*
+   * Tells Webpack where to find your LESS file and what its bundle is called.
+   */
+  entry: {
+    style: "./less/style.less",
+    "editor-style": "./less/editor-style.less",
+    print: "./less/style-print.less",
+  },
 
-    /*
-    * Tells Webpack where to find your LESS file and what its bundle is called.
-    */
-    entry: {
-        style: './less/style.less',
-        'editor-style': './less/editor-style.less',
-        print: './less/style-print.less',
-    },
-
-    /*
-    * WordPress expects CSS files to go in the theme directory, not dist.
-    * To do that, we need to tell it explicitly to put CSS files in the same
-    * directory as this file, AKA `__dirname`.
-    */
-    output: {
-        path: path.resolve(__dirname, '.'),
-    },
+  /*
+   * WordPress expects CSS files to go in the theme directory, not dist.
+   * To do that, we need to tell it explicitly to put CSS files in the same
+   * directory as this file, AKA `__dirname`.
+   */
+  output: {
+    path: path.resolve(__dirname, "."),
+  },
 
-    plugins: [
-        new MiniCssExtractPlugin(),
-        new AssetsVersionPlugin({
-            versionFile: 'styles.version',
-            useHash: true,
-        }),
-        new DeleteAfterBuildPlugin({
-            paths: ['print.js*', 'style.js*', 'editor-style.js*'],
-        })
-    ],
-    module: {
-        rules: [
-            {
-                test: /\.(less)/,
-                use: [
-                    MiniCssExtractPlugin.loader,
-                    {
-                        loader: "css-loader",
-                        options: {
-                            sourceMap: true,
-                        }
-                    },
-                    {
-                        loader: "less-loader",
-                        options: {
-                            sourceMap: true,
-                            additionalData: `@theme-path: ${getThemePath()};`,
-                        }
-                    }
-                ]
+  plugins: [
+    new MiniCssExtractPlugin(),
+    new AssetsVersionPlugin({
+      versionFile: "styles.version",
+      useHash: true,
+    }),
+    new DeleteAfterBuildPlugin({
+      paths: ["print.js*", "style.js*", "editor-style.js*"],
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.(less)/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: "css-loader",
+            options: {
+              sourceMap: true,
+            },
+          },
+          {
+            loader: "less-loader",
+            options: {
+              sourceMap: true,
+              additionalData: `@theme-path: ${getThemePath()};`,
             },
+          },
         ],
-    },
-    optimization: {
-        minimizer: [new CssMinimizerPlugin()]
-    }
+      },
+    ],
+  },
+  optimization: {
+    minimizer: [new CssMinimizerPlugin()],
+  },
 });
 
 module.exports = [jsConfig, cssConfig];