Webpack Config MFRA

gistfile1.txt

'use strict';

const path = require('path');
const glob = require('glob');
const webpack = require('webpack');
const WebpackExtractTextPlugin = require('extract-text-webpack-plugin');
const WebpackCleanPlugin = require('clean-webpack-plugin');
const WebpackStyleLintPlugin = require('stylelint-webpack-plugin');
const nodeModulesPath = path.resolve(__dirname, 'node_modules');
const cartridgesPath = path.resolve(__dirname, 'cartridges');

process.noDeprecation = true;


class WebpackBundle {

    /**
     * Scans the cartridge client side source folder and returns an
     * object with sass and javascript files.
     *
     * @param {string} cartridge - The cartridge name
     * @return {Object} - Object of sass and js files
     */
    static scanEntryPoints(cartridge = 'app_storefront_base') {
        const srcPath = path.resolve(cartridgesPath, cartridge, 'src');
        const srcSCSSPath = path.join(srcPath, '*', 'scss', '**', '*.scss');
        const srcJSPath = path.join(srcPath, '*', 'js', '**', '*.js');
        let files = {};

       // Scan scss files
        glob.sync(srcSCSSPath)
          .filter(source => !path.basename(source).startsWith('_'))
          .map((source) => {
              let sourceRelativePath = path.dirname(path.relative(srcPath, source));
              sourceRelativePath = sourceRelativePath.split('/');
              sourceRelativePath[1] = sourceRelativePath[1].replace('scss', 'css');
              sourceRelativePath = sourceRelativePath.join('/');

              const sourceName = path.basename(source).replace('scss', 'css');
              const outputFile = path.join(sourceRelativePath, sourceName);

              files[outputFile] = source;

              return source;
          });

      // scan js files
        glob.sync(srcJSPath)
         .filter(source => !path.basename(source).startsWith('_'))
         .map((source) => {
             const sourceRelativePath = path.dirname(path.relative(srcPath, source));
             const sourceName = path.basename(source);
             const outputFile = path.join(sourceRelativePath, sourceName);

             files[outputFile] = source;

             return source;
         });

        return files;
    }

   /**
    * Base plugins.
    *
    * @return {array} - Array of Plugins
    */
    static getBasePlugins() {
        return [
            new WebpackStyleLintPlugin({ files: 'src/**/*.scss' }),
            new WebpackExtractTextPlugin('[name]')
        ];
    }

   /**
    * Returns the webpack config object tree.
    *
    * @param {string} env - Environment variable
    * @param {string} cartridge - The cartridge name
    * @return {Object} - Webpack config
    */
    static bundleCartridge(env = 'dev', cartridge = 'app_storefront_base') {
        const isDevelopment = env === 'dev';
        const sourcePath = path.resolve(cartridgesPath, cartridge, 'src');
        const outputPath = path.resolve(cartridgesPath, cartridge, 'cartridge', 'static');
        let plugins = this.getBasePlugins(cartridge);

    
        plugins.push(
            new WebpackCleanPlugin(['*/js', '*/css'], {
                root: path.resolve(cartridgesPath, cartridge, 'cartridge', 'static'),
                verbose: false
            })
        );

        plugins.push(
            new webpack.optimize.UglifyJsPlugin({
                minimize: true,
                sourceMap: false,
                compress: {
                    drop_console: true
                },
                output: {
                    comments: false
                },
                mangle: {
                    except: ['$', 'exports', 'require']
                }
            })
        );
        
        return {
            name: cartridge,
            stats: { children: false },
            entry: this.scanEntryPoints(cartridge),
            output: {
                path: outputPath,
                filename: '[name]'
            },
            resolve: {
                alias: {
                    cartridges: cartridgesPath
                }
            },
            module: {
                rules: [
                    {
                        test: /\.js$/,
                        include: sourcePath,
                        exclude: /node_modules/,
                        loader: 'eslint-loader',
                        enforce: 'pre'
                    },
                    {
                        test: /\.js$/,
                        loader: 'babel-loader',
                        options: {
                            cacheDirectory: true,
                            presets: ['es2015']
                        }
                    },
                    {
                        test: /\.scss$/,
                        loader: WebpackExtractTextPlugin.extract([
                            {
                                loader: 'css-loader',
                                options: {
                                    url: false,
                                    sourceMap: isDevelopment,
                                    minimize: !isDevelopment
                                }
                            },
                            {
                                loader: 'sass-loader',
                                options: {
                                    includePaths: [nodeModulesPath],
                                    sourceMap: isDevelopment,
                                    minimize: !isDevelopment
                                }
                            }
                        ])
                    }
                ]
            },
            plugins: plugins,
            devtool: isDevelopment ? 'source-map' : undefined,
            cache: true
        };
    }
}

module.exports = (env) => {
    return [
        WebpackBundle.bundleCartridge(env, 'app_storefront_base'),
        WebpackBundle.bundleCartridge(env, 'app_storefront_common'),
        WebpackBundle.bundleCartridge(env, 'app_storefront_foobar')
    ];
};