@alleyinteractive/build-tool/dist/cjs/config/webpack.config.js

An opinionated set of build configurations for wp-scripts

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const path_1 = __importDefault(require("path"));
const node_process_1 = require("node:process");
const copy_webpack_plugin_1 = __importDefault(require("copy-webpack-plugin"));
const mini_css_extract_plugin_1 = __importDefault(require("mini-css-extract-plugin"));
const clean_webpack_plugin_1 = require("clean-webpack-plugin");
// eslint-disable-next-line import/no-unresolved
const webpack_1 = require("../utils/webpack");
// eslint-disable-next-line @typescript-eslint/no-var-requires
const defaultConfig = require('@wordpress/scripts/config/webpack.config');
/**
 * Check if the build is running in production mode.
 */
const isProduction = process.env.NODE_ENV === 'production';
/**
 * The directory name where the entry point directories are located.
 * These are entries NOT associated with blocks.
 */
const entriesDir = process.env.ENTRIES_DIRECTORY || 'entries';
/**
 * Whether to only build blocks from the `--webpack-src-dir` and ignore the
 * entry points in the `--webpack-entries-dir` or 'entries' directory.
 */
const blocksOnly = process.env.BLOCKS_ONLY === 'true';
/**
 * The mode to run webpack in. Either production or development.
 */
const mode = isProduction ? 'production' : 'development';
/**
 * webpack configuration.
 *
 * This webpack configuration is an extension of the default configuration
 * provided by @wordpress/scripts. Read the documentation for
 * extending the wp-scripts webpack configuration for more information.
 *
 * @see https://github.com/WordPress/gutenberg/tree/trunk/packages/scripts#extending-the-webpack-config
 * @see https://github.com/WordPress/gutenberg/blob/trunk/packages/scripts/config/webpack.config.js
 */
const config = (defaultConfig ? {
    ...defaultConfig,
    // Dynamically produce entries from the slotfills index file and all blocks.
    entry: () => {
        let blocks = typeof defaultConfig.entry === 'function' ? defaultConfig.entry() : {};
        blocks = blocks && typeof blocks === 'object' ? blocks : {};
        const entries = blocksOnly === true ? {} : (0, webpack_1.getEntries)(entriesDir);
        return {
            ...blocks,
            ...entries,
        };
    },
    /**
     * This configuration option is being overridden from the default wp-scripts
     * config in order to process the build so that each entry point is output
     * to its own directory.
     *
     * The 'build' output path is maintained due to the
     * devServer configuration from wp-scripts.
     */
    output: {
        clean: mode === 'production',
        filename: (pathData) => (0, webpack_1.processFilename)(pathData, true, 'js'),
        chunkFilename: (pathData) => (0, webpack_1.processFilename)(pathData, false, 'js', 'runtime'),
        path: path_1.default.join((0, node_process_1.cwd)(), 'build'),
    },
    // Configure plugins.
    plugins: [
        ...(Array.isArray(defaultConfig.plugins) ? defaultConfig.plugins : []),
        new copy_webpack_plugin_1.default({
            patterns: [
                {
                    from: '**/{index.php,*.css}',
                    context: entriesDir,
                    noErrorOnMissing: true,
                },
            ],
        }),
        new mini_css_extract_plugin_1.default({
            filename: (pathData) => (0, webpack_1.processFilename)(pathData, true, 'css'),
            chunkFilename: (pathData) => (0, webpack_1.processFilename)(pathData, false, 'css', 'runtime'),
        }),
        new clean_webpack_plugin_1.CleanWebpackPlugin({
            cleanAfterEveryBuildPatterns: [
                /**
                 * Remove duplicate entry CSS files generated from default
                 * MiniCssExtractPlugin plugin in wpScripts.
                 *
                 * The default MiniCssExtractPlugin filename is [name].css
                 * resulting in the generation of the `${entriesDir}-*.css` files.
                 * The configuration in this file for MiniCssExtractPlugin outputs
                 * the entry CSS into the entry src directory name.
                 */
                `${entriesDir}-*.css`,
                // Maps are built when running the start mode with wpScripts.
                `${entriesDir}-*.css.map`,
            ],
            protectWebpackAssets: false,
        }),
    ],
    // This webpack alias rule is needed at the root to ensure that the paths are resolved
    // using the custom alias defined below.
    resolve: {
        ...defaultConfig.resolve,
        alias: {
            ...defaultConfig?.resolve?.alias,
            // Custom alias to resolve paths to the project root. Example: '@/client/src/index.js'.
            '@': path_1.default.resolve((0, node_process_1.cwd)()),
        },
    },
    devServer: mode === 'production' ? {} : {
        ...defaultConfig.devServer,
        allowedHosts: 'all',
        static: {
            directory: '/build',
        },
    },
} : {});
exports.default = config;
//# sourceMappingURL=webpack.config.js.map