@shopify/sewing-kit/webpack.js

"use strict";
var __assign = (this && this.__assign) || Object.assign || function(t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
        s = arguments[i];
        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
            t[p] = s[p];
    }
    return t;
};
var path_1 = require("path");
var webpack = require("webpack");
var AssetsPlugin = require("assets-webpack-plugin");
var WebpackMd5Hash = require("webpack-md5-hash");
var utilities_1 = require("./utilities");
function deepMergeObject(objectOne, objectTwo) {
    if (objectOne === void 0) { objectOne = {}; }
    if (objectTwo === void 0) { objectTwo = {}; }
    var newObject = objectOne;
    Object.keys(objectTwo).forEach(function (key) {
        if (typeof objectTwo[key] === 'function') {
            var mergeFunction = objectTwo[key];
            newObject[key] = mergeFunction(objectOne[key]);
        }
        else if (typeof objectTwo[key] !== 'object') {
            newObject[key] = objectOne[key] || objectTwo[key];
        }
        else if (Array.isArray(objectTwo[key])) {
            newObject[key] = (objectOne[key] || []).concat(objectTwo[key]);
        }
        else {
            newObject[key] = deepMergeObject(objectOne[key], objectTwo[key]);
        }
    });
    return newObject;
}
function smartMergeUserConfig(object, merger) {
    var finalConfig = __assign({}, object);
    return deepMergeObject(object, merger);
}
function removeEmptyPlugins(plugins) {
    var filteredPlugins = [];
    for (var _i = 0, plugins_1 = plugins; _i < plugins_1.length; _i++) {
        var plugin = plugins_1[_i];
        if (plugin) {
            filteredPlugins.push(plugin);
        }
    }
    return filteredPlugins;
}
module.exports = function createShopifyWebpackConfigFactory(options) {
    if (options === void 0) { options = {}; }
    var env = new utilities_1.Env(options);
    var paths = new utilities_1.Paths();
    var project = new utilities_1.Project(paths);
    var cdn = options.cdn, appRoot = options.appRoot, assetDevServerPort = options.assetDevServerPort, assetDevServerHost = options.assetDevServerHost, assetDevServerPath = options.assetDevServerPath, outputDirectory = options.outputDirectory;
    var uiRoot = appRoot || path_1.resolve(paths.app.root, project.ifRails('./app/ui', './app'));
    return function createShopifyWebpackConfig(additionalConfig) {
        if (additionalConfig === void 0) { additionalConfig = {}; }
        var config = additionalConfig;
        return smartMergeUserConfig(config, {
            target: env.ifServer('node', 'web'),
            // We have to set this to be able to use these items when executing a
            // server bundle.  Otherwise strangeness happens, like __dirname resolving
            // to '/'.  There is no effect on our client bundle.
            node: {
                __dirname: true,
                __filename: true,
            },
            devtool: env.ifServer('source-map', env.ifDevelopment('source-map', 'hidden-source-map')),
            entry: function (currentEntry) {
                return currentEntry || uiRoot;
            },
            output: {
                filename: env.ifProduction('[name]-[chunkhash].js', '[name].js'),
                path: outputDirectory || project.ifRails(path_1.join(paths.app.root, 'public/bundles'), path_1.join(paths.app.root, 'build')),
                publicPath: env.ifProduction(cdn, project.ifRails('/webpack/assets/', "http://" + (assetDevServerHost || 'localhost') + ":" + assetDevServerPort + "/" + (assetDevServerPath || ''))) || '/assets/',
                chunkFilename: '[name]-[chunkhash].js',
                libraryTarget: env.ifServer('commonjs2', 'var'),
            },
            resolve: {
                modules: function (currentModules) {
                    var modules = new Set([uiRoot].concat((currentModules || ['node_modules'])));
                    return Array.from(modules);
                },
                extensions: function (currentExtensions) {
                    if (currentExtensions === void 0) { currentExtensions = []; }
                    var extensions = new Set(currentExtensions);
                    extensions.add('.js');
                    extensions.add('.json');
                    if (project.isTypeScript) {
                        extensions.add('.ts');
                        extensions.add('.tsx');
                    }
                    return Array.from(extensions);
                },
            },
            resolveLoader: {
                modules: function (currentModules) {
                    var modules = new Set([paths.own.nodeModules].concat((currentModules || ['node_modules'])));
                    return Array.from(modules);
                },
            },
            module: {
                rules: function (currentRules) {
                    var rules = currentRules || [];
                    var jsRuleMatcher = utilities_1.createPartialObjectMatcher({ test: /\.js$/ });
                    if (!rules.some(jsRuleMatcher)) {
                        rules.push({
                            test: /\.js$/,
                            exclude: /node_modules/,
                            loader: 'babel-loader',
                            options: {
                                babelrc: false,
                                presets: [
                                    [require.resolve('babel-preset-shopify/web'), { modules: false }],
                                    require.resolve('babel-preset-shopify/react'),
                                ],
                            },
                        });
                    }
                    if (project.isTypeScript) {
                        var tsRuleMatcher = utilities_1.createPartialObjectMatcher({ test: /\.tsx?$/ });
                        if (!rules.some(tsRuleMatcher)) {
                            rules.push({
                                test: /\.tsx?$/,
                                loader: 'awesome-typescript-loader',
                                exclude: /node_modules/,
                                options: {
                                    silent: true,
                                    useBabel: true,
                                    useCache: true,
                                    compiler: path_1.resolve(paths.app.nodeModules, 'typescript'),
                                    cacheDirectory: path_1.resolve(project.ifRails(path_1.join(paths.app.root, 'tmp'), path_1.join(paths.app.root, 'build')), 'cache/.typescript'),
                                    babelOptions: {
                                        babelrc: false,
                                        plugins: project.hasDependency('react-hot-loader') ? ['react-hot-loader/babel'] : [],
                                        presets: [
                                            [require.resolve('babel-preset-shopify/web'), { modules: false }],
                                            require.resolve('babel-preset-shopify/react'),
                                        ],
                                    },
                                },
                            });
                        }
                    }
                    if (project.hasDependency('@shopify/quilt')) {
                        rules.push({
                            test: /\.scss$/,
                            loader: 'scss-loader',
                            include: [path_1.resolve(paths.app.nodeModules, '@shopify/quilt')],
                        });
                    }
                    return rules;
                },
            },
            plugins: removeEmptyPlugins([
                project.ifRails(new AssetsPlugin({
                    filename: 'webpack-manifest.json',
                    path: path_1.resolve(paths.app.root, 'tmp'),
                })),
                env.ifDevelopmentClient(new webpack.NamedModulesPlugin()),
                env.ifProductionClient(new WebpackMd5Hash()),
                // env.ifProductionClient(
                //   new ExtractTextPlugin({filename: '[name]-[chunkhash].css', allChunks: true}),
                // ),
                env.ifProductionClient(new webpack.optimize.UglifyJsPlugin({
                    sourceMap: true,
                    comments: false,
                    compress: {
                        screw_ie8: true,
                        warnings: false,
                    },
                    mangle: {
                        screw_ie8: true,
                    },
                })),
            ]),
        });
    };
};