Update webpack.config.js

webpack.config.js

@@ -1,75 +1,48 @@
-const autoprefixer = require("autoprefixer");
-const MiniCSSExtractPlugin = require("mini-css-extract-plugin");
-const CSSMinimizerPlugin = require("css-minimizer-webpack-plugin");
-const TerserPlugin = require("terser-webpack-plugin");
+const defaultConfig = require("@wordpress/scripts/config/webpack.config");
+const webpack = require("webpack");
+const { basename, dirname, resolve } = require("path");
+const srcDir = "src";
+const admin = resolve(process.cwd(), "src", "admin");
+const calendar = resolve(process.cwd(), "src", "calendar");
+const events = resolve(process.cwd(), "src", "events");
 
-const path = require("path");
-const admin = path.join(__dirname, "src", "admin");
-const calendar = path.join(__dirname, "src", "calendar");
-const events = path.join(__dirname, "src", "events");
-
-module.exports = (env, argv) => {
-    function isDevelopment() {
-        return argv.mode === "development";
-    }
-    var config = {
-        entry: {
-            admin,
-            calendar,
-            events,
-        },
-        output: {
-            path: path.resolve(__dirname, "build"),
-            filename: "[name].js",
-            clean: true,
-        },
-        optimization: {
-            minimizer: [
-                new CSSMinimizerPlugin(),
-                new TerserPlugin({ terserOptions: { sourceMap: true } }),
-            ],
-        },
-        plugins: [
-            new MiniCSSExtractPlugin({
-                chunkFilename: "[id].css",
-                filename: (chunkData) => {
-                    return "[name].css";
-                },
-            }),
-        ],
-        devtool: isDevelopment() ? "cheap-module-source-map" : false,
-        module: {
-            rules: [
-                {
-                    test: /\.js$/,
-                    exclude: /node_modules/,
-                    use: [
-                        {
-                            loader: "babel-loader",
-                            options: {
-                                presets: ["@babel/preset-env"],
-                            },
-                        },
-                    ],
-                },
-                {
-                    test: /\.(sa|sc|c)ss$/,
-                    use: [
-                        MiniCSSExtractPlugin.loader,
-                        "css-loader",
-                        {
-                            loader: "postcss-loader",
-                            options: {
-                                postcssOptions: {
-                                    plugins: [autoprefixer()],
-                                },
-                            },
-                        },
-                        "sass-loader",
-                    ],
+module.exports = {
+    ...defaultConfig,
+    entry: {
+        admin,
+        calendar,
+        events,
+    },
+    output: {
+        path: resolve(process.cwd(), "build"),
+        filename: "[name].js",
+        clean: true,
+    },
+    optimization: {
+        ...defaultConfig.optimization,
+        splitChunks: {
+            cacheGroups: {
+                style: {
+                    type: "css/mini-extract",
+                    test: /[\\/]style(\.module)?\.(pc|sc|sa|c)ss$/,
+                    chunks: "all",
+                    enforce: true,
+                    name(_, chunks, cacheGroupKey) {
+                        const chunkName = chunks[0].name;
+                        return `${dirname(chunkName)}/${basename(
+                            chunkName
+                        )}.${cacheGroupKey}`;
+                    },
                 },
-            ],
+                default: false,
+            },
         },
-    };
-    return config;
+    },
+    plugins: [
+        ...defaultConfig.plugins,
+        new webpack.ProvidePlugin({
+            $: "jquery",
+            jQuery: "jquery",
+        }),
+    ],
 };