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

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

// ----------------------------------------------------------------------------
// Webpack JavaScript Config
// ----------------------------------------------------------------------------
//
// Webpack configuration to generate process JavaScript
//
// ----------------------------------------------------------------------------

/**
 * Load Dependencies
 */
const path         = require('path');
const TerserPlugin = require('terser-webpack-plugin');


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


/**
 * Compile JavaScript
 */
exports.compile = () => ({
    module: {
        rules: [
            {
                // Apply rule for JavaScript files (excluding the Node modules)
                test:    /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    // Babel loader compiling modern ES6 JavaScript down to ES5
                    loader:  'babel-loader',
                    options: {
                        presets: [
                            [
                                "@babel/preset-env",
                                {
                                    "targets": {
                                        "esmodules": true
                                    }
                                }
                            ],
                        ],
                        sourceMaps: true
                    }
                }
            },
            // {
            //     test: /\.js$/,
            //     enforce: "pre",
            //     use: ["source-map-loader"], // Extracts source maps from existing source files
            // }
        ]
    },
});


/**
 * Minify JavaScript
 */
exports.minify = ({
    terserOpts = {}
} = {}) => ({
    optimization: {
        minimize:  true,
        minimizer: [
            new TerserPlugin(terserOpts),
        ],
    },
});


/**
 * Define "Chunking Strategy" for Dynamically Imported Modules
 *
 * Docs: https://webpack.js.org/configuration/optimization/#optimizationsplitchunks
 * Docs: https://webpack.js.org/plugins/split-chunks-plugin/
 */
exports.splitChunks = () => ({
    optimization: {
        splitChunks: {
            chunks:                 'async',
            // minSize:                30000,
            // minRemainingSize:       0,
            // maxSize:                0,
            // minChunks:              1,
            // maxAsyncRequests:       6,
            // maxInitialRequests:     4,
            // automaticNameDelimiter: '~',
            // cacheGroups:            {
            //     defaultVendors: {
            //         test:               /[\\/]node_modules[\\/]/,
            //         priority:           -10
            //     },
            //     default: {
            //         minChunks:          2,
            //         priority:           -20,
            //         reuseExistingChunk: true
            //     }
            // }
        }
    },
});


/**
 * Expose jQuery to the Global Space for Non-Webpack Packages
 *
 * Note: if this doesn't work, try this in your app.js instead:
 *     import $ from 'expose-loader?exposes[]=$&exposes[]=jQuery!jquery';
 */
exports.jQueryExpose = () => ({
    module: {
        rules: [
            {
                test:    require.resolve('jquery'),
                loader:  'expose-loader',
                options: {
                    exposes: [
                        {
                            globalName: '$',
                            override: true,
                        },
                        {
                            globalName: 'jQuery',
                            override: true,
                        }
                    ],
                },
            }
        ]
    },
});


/**
 * Loader for Modernizr
 *
 * Docs: https://www.npmjs.com/package/modernizr-loader
 */
exports.loadModernizr = () => ({
    module: {
        rules: [{
            test: /\.modernizrrc$/,
            use: [{
                loader: 'val-loader',
                options: {
                    executableFile: require.resolve('val-loader-modernizr')
                }
            }]
        }]
    }
});


/**
 * Loader for GraphQL
 */
exports.loadGraphQL = () => ({
    module: {
        rules: [
            {
                // Apply rule for .graphql and .gql files
                test: /\.(graphql|gql)$/,
                exclude: /node_modules/,
                use: [
                    {
                        // Use raw-loader to import file contents as a string
                        loader: 'raw-loader',
                    },
                ],
            },
        ],
    },
});


/**
 * Transform `__FILE__` and `__FILE_FULL__` variables in JavaScript files
 */
exports.debugFilenames = () => ({
    module: {
        rules: [
            {
                test: /\.js$/,
                use: [
                    {
                        loader: path.resolve(__dirname, 'loaders', 'filename-loader.js')
                    },
                ],
            },
        ],
    },
});