@iamota/iamota-webpack/iamota-webpack.parts.shopify.js

Helper tools for Webpack for iamota Framework (WordPress and Shopify)

// ----------------------------------------------------------------------------
// Webpack Shopify Config
// ----------------------------------------------------------------------------
//
// Webpack configuration for processing Shopify projects and syncing via ThemeKit
//
// ----------------------------------------------------------------------------

/**
 * Load Dependencies
 */
const { merge }   = require('webpack-merge');
const CopyPlugin  = require('copy-webpack-plugin');
const chalk       = require('chalk');


/**
 * Initialize Config
 */
let config = {};
exports.init = function (config) {
    this.config = config;

    // ThemeKit Defaults
    this.config.themeKitFlags = {
        env: this.config.env.target,
    };

    return this;
};


/**
 * Process Shopify Tasks
 */
exports.process = function () {
    return merge([
        this.copyShopifyCode(),
        this.showCompilerStatus(),
    ]);
};


/**
 * Copy Shopify Code from "src" to "dist" (and flatten directory structures)
 */
exports.copyShopifyCode = () => ({
    plugins: [
        // Copy Liquid Files
        new CopyPlugin({
            patterns: [
                {
                    from: 'src/config/*',
                    to:   'config/[name][ext]',
                },
                {
                    from: 'src/locales/**/*.json',
                    to:   'locales/[name][ext]',
                },
                {
                    from: 'src/templates/**/*.(liquid|json)',
                    to:   'templates/[name][ext]',
                    globOptions: {
                        // Ignore customer account templates (handled below)
                        ignore: ['**/templates/customers/**'],
                    },
                },
                {
                    from: 'src/templates/customers/**/*.(liquid|json)',
                    to:   'templates/customers/[name][ext]',
                },
                {
                    from: 'src/layout/**/*.liquid',
                    to:   'layout/[name][ext]',
                },
                {
                    from: 'src/sections/**/*.liquid',
                    to:   'sections/[name][ext]',
                },
                {
                    from: 'src/snippets/**/*.liquid',
                    to:   'snippets/[name][ext]',
                }
            ]
        }, {
            copyUnmodified: true
        }),
    ],
});


/**
 * Initialize "ThemeKit Watch" after the initial build
 */
exports.showCompilerStatus = () => ({
    plugins: [
        {
            apply: (compiler) => {
                // A single asset has been emitted
                compiler.hooks.assetEmitted.tap('iamotaShopifyPlugin', (file) => {
                    console.log(`📄 ${chalk.cyan(file)} successfully processed`);
                });


                // All assets queued have been emitted
                compiler.hooks.afterEmit.tap('iamotaShopifyPlugin', () => {
                    console.log(`🚀 ${chalk.magentaBright('Webpack successfully processed all assets')}`);
                });
            }
        }
    ]
});