saven/packages/saven-webpack-runner/dist/util/chain.js

no

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const HtmlWebpackPlugin = require("html-webpack-plugin");
const lodash_1 = require("lodash");
const fp_1 = require("lodash/fp");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require("path");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const htmlWebpackIncludeAssetsPlugin = require("html-webpack-include-assets-plugin");
const webpack = require("webpack");
const _1 = require(".");
const postcss_conf_1 = require("../config/postcss.conf");
const defaultUglifyJsOption = {
    keep_fnames: true,
    output: {
        comments: false,
        keep_quoted_props: true,
        quote_keys: true,
        beautify: false
    },
    warnings: false
};
const defaultCSSCompressOption = {
    mergeRules: false,
    mergeIdents: false,
    reduceIdents: false,
    discardUnused: false,
    minifySelectors: false
};
const getLoader = (loaderName, options) => {
    return {
        loader: require.resolve(loaderName),
        options: options || {}
    };
};
const getPlugin = (plugin, args) => {
    return {
        plugin,
        args: [args]
    };
};
const mergeOption = ([...options]) => {
    return Object.assign({}, ...options);
};
const getDllContext = (outputRoot, dllDirectory) => {
    return path.join(_1.appPath, outputRoot, dllDirectory);
};
const getNamedDllContext = (outputRoot, dllDirectory, name) => {
    return {
        context: path.join(_1.appPath, outputRoot, dllDirectory),
        name
    };
};
const processDllOption = context => {
    return {
        path: path.join(context, '[name]-manifest.json'),
        name: '[name]_library',
        context
    };
};
const processDllReferenceOption = ({ context, name }) => {
    return {
        context,
        manifest: path.join(context, `${name}-manifest.json`)
    };
};
const processEnvOption = lodash_1.partial(fp_1.mapKeys, key => `process.env.${key}`);
exports.processEnvOption = processEnvOption;
const getStyleLoader = fp_1.pipe(mergeOption, lodash_1.partial(getLoader, 'style-loader'));
exports.getStyleLoader = getStyleLoader;
const getCssLoader = fp_1.pipe(mergeOption, lodash_1.partial(getLoader, 'css-loader'));
exports.getCssLoader = getCssLoader;
const getPostcssLoader = fp_1.pipe(mergeOption, lodash_1.partial(getLoader, 'postcss-loader'));
exports.getPostcssLoader = getPostcssLoader;
const getResolveUrlLoader = fp_1.pipe(mergeOption, lodash_1.partial(getLoader, 'resolve-url-loader'));
exports.getResolveUrlLoader = getResolveUrlLoader;
const getSassLoader = fp_1.pipe(mergeOption, lodash_1.partial(getLoader, 'sass-loader'));
exports.getSassLoader = getSassLoader;
const getLessLoader = fp_1.pipe(mergeOption, lodash_1.partial(getLoader, 'less-loader'));
exports.getLessLoader = getLessLoader;
const getStylusLoader = fp_1.pipe(mergeOption, lodash_1.partial(getLoader, 'stylus-loader'));
exports.getStylusLoader = getStylusLoader;
const getExtractCssLoader = () => {
    return {
        loader: MiniCssExtractPlugin.loader
    };
};
exports.getExtractCssLoader = getExtractCssLoader;
const getMiniCssExtractPlugin = fp_1.pipe(mergeOption, lodash_1.partial(getPlugin, MiniCssExtractPlugin));
exports.getMiniCssExtractPlugin = getMiniCssExtractPlugin;
const getHtmlWebpackPlugin = fp_1.pipe(mergeOption, lodash_1.partial(getPlugin, HtmlWebpackPlugin));
exports.getHtmlWebpackPlugin = getHtmlWebpackPlugin;
const getDefinePlugin = fp_1.pipe(mergeOption, lodash_1.partial(getPlugin, webpack.DefinePlugin));
exports.getDefinePlugin = getDefinePlugin;
const getHotModuleReplacementPlugin = lodash_1.partial(getPlugin, webpack.HotModuleReplacementPlugin, {});
exports.getHotModuleReplacementPlugin = getHotModuleReplacementPlugin;
const getUglifyPlugin = ([enableSourceMap, uglifyOptions]) => {
    return new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: enableSourceMap,
        uglifyOptions: lodash_1.merge({}, defaultUglifyJsOption, uglifyOptions)
    });
};
exports.getUglifyPlugin = getUglifyPlugin;
const getDllPlugin = fp_1.pipe(getDllContext, processDllOption, lodash_1.partial(getPlugin, webpack.DllPlugin));
exports.getDllPlugin = getDllPlugin;
const getDllReferencePlugin = fp_1.pipe(getNamedDllContext, processDllReferenceOption, lodash_1.partial(getPlugin, webpack.DllReferencePlugin));
const getHtmlWebpackIncludeAssetsPlugin = lodash_1.partial(getPlugin, htmlWebpackIncludeAssetsPlugin);
exports.getHtmlWebpackIncludeAssetsPlugin = getHtmlWebpackIncludeAssetsPlugin;
const getEntry = (customEntry = {}) => {
    return Object.assign({
        app: path.join('.temp', 'app.js')
    }, customEntry);
};
exports.getEntry = getEntry;
const getModule = ({ mode, staticDirectory, designWidth, deviceRatio, enableExtract, enableSourceMap, styleLoaderOption, cssLoaderOption, lessLoaderOption, sassLoaderOption, stylusLoaderOption, fontUrlLoaderOption, imageUrlLoaderOption, mediaUrlLoaderOption, module, plugins }) => {
    const postcssOption = module.postcss || {};
    const styleLoader = getStyleLoader([{ sourceMap: enableSourceMap }, styleLoaderOption]);
    const extractCssLoader = getExtractCssLoader();
    const lastCssLoader = enableExtract ? extractCssLoader : styleLoader;
    const cssOptions = [
        {
            importLoaders: 1,
            sourceMap: enableSourceMap
        },
        cssLoaderOption
    ];
    const isCssoEnabled = (plugins.csso && plugins.csso.enable === false)
        ? false
        : true;
    if (mode !== 'development' && isCssoEnabled) {
        const customCssoOption = plugins.csso ? plugins.csso.config : {};
        cssOptions.push({
            minimize: lodash_1.merge(defaultCSSCompressOption, customCssoOption)
        });
    }
    const cssLoader = getCssLoader(cssOptions);
    const postcssLoader = getPostcssLoader([
        { sourceMap: enableSourceMap },
        {
            ident: 'postcss',
            plugins: postcss_conf_1.getPostcssPlugins({
                designWidth,
                deviceRatio,
                postcssOption
            })
        }
    ]);
    const resolveUrlLoader = getResolveUrlLoader([]);
    const sassLoader = getSassLoader([{ sourceMap: true }, sassLoaderOption]);
    const lessLoader = getLessLoader([{ sourceMap: enableSourceMap }, lessLoaderOption]);
    const stylusLoader = getStylusLoader([{ sourceMap: enableSourceMap }, stylusLoaderOption]);
    const rule = {};
    rule.jsx = {
        use: {
            babelLoader: {
                options: Object.assign({}, plugins.babel, { sourceMap: enableSourceMap })
            }
        }
    };
    rule.media = {
        use: {
            urlLoader: {
                options: Object.assign({ name: `${staticDirectory}/media/[name].[ext]` }, mediaUrlLoaderOption)
            }
        }
    };
    rule.font = {
        use: {
            urlLoader: {
                options: Object.assign({ name: `${staticDirectory}/fonts/[name].[ext]` }, fontUrlLoaderOption)
            }
        }
    };
    rule.image = {
        use: {
            urlLoader: {
                options: Object.assign({ name: `${staticDirectory}/images/[name].[ext]` }, imageUrlLoaderOption)
            }
        }
    };
    rule.sass = {
        test: /\.(css|scss|sass)(\?.*)?$/,
        exclude: [/node_modules/],
        use: [lastCssLoader, cssLoader, postcssLoader, resolveUrlLoader, sassLoader]
    };
    rule.less = {
        test: /\.less(\?.*)?$/,
        exclude: [/node_modules/],
        use: [lastCssLoader, cssLoader, postcssLoader, lessLoader]
    };
    rule.styl = {
        test: /\.styl(\?.*)?$/,
        exclude: [/node_modules/],
        use: [lastCssLoader, cssLoader, postcssLoader, stylusLoader]
    };
    rule.sassInNodemodules = {
        test: /\.(css|scss|sass)(\?.*)?$/,
        include: [/node_modules/],
        use: [lastCssLoader, cssLoader, sassLoader]
    };
    rule.lessInNodemodules = {
        test: /\.less(\?.*)?$/,
        include: [/node_modules/],
        use: [lastCssLoader, cssLoader, lessLoader]
    };
    rule.stylInNodemodules = {
        test: /\.styl(\?.*)?$/,
        include: [/node_modules/],
        use: [lastCssLoader, cssLoader, stylusLoader]
    };
    return { rule };
};
exports.getModule = getModule;
const getOutput = ([{ outputRoot, publicPath, chunkDirectory }, customOutput]) => {
    return Object.assign({
        path: path.join(_1.appPath, outputRoot),
        filename: 'js/[name].js',
        chunkFilename: `${chunkDirectory}/[name].js`,
        publicPath
    }, customOutput);
};
exports.getOutput = getOutput;
const getDllOutput = ({ outputRoot, dllDirectory }) => {
    return {
        path: path.join(_1.appPath, outputRoot, dllDirectory),
        filename: '[name].dll.js',
        library: '[name]_library'
    };
};
exports.getDllOutput = getDllOutput;
const getDevtool = enableSourceMap => {
    return enableSourceMap ? 'cheap-module-eval-source-map' : 'none';
};
exports.getDevtool = getDevtool;
const getDllReferencePlugins = ({ dllEntry, outputRoot, dllDirectory }) => {
    return fp_1.pipe(fp_1.toPairs, fp_1.map(([key]) => {
        return [`dll${key}`, getDllReferencePlugin(outputRoot, dllDirectory, key)];
    }), fp_1.fromPairs)(dllEntry);
};
exports.getDllReferencePlugins = getDllReferencePlugins;