@lipemat/js-boilerplate/config/webpack.dist.js

Dependencies and scripts for a no config JavaScript app

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const path_1 = __importDefault(require("path"));
const compression_webpack_plugin_1 = __importDefault(require("compression-webpack-plugin"));
const mini_css_extract_plugin_1 = __importDefault(require("mini-css-extract-plugin"));
const clean_webpack_plugin_1 = require("clean-webpack-plugin");
const webpack_assets_manifest_1 = require("webpack-assets-manifest");
const webpack_subresource_integrity_1 = require("webpack-subresource-integrity");
const fork_ts_checker_webpack_plugin_1 = __importDefault(require("fork-ts-checker-webpack-plugin"));
const WebpackAssetsHash_1 = __importDefault(require("../helpers/WebpackAssetsHash"));
const webpack_1 = require("webpack");
const config_1 = require("../helpers/config");
const entries_1 = require("../helpers/entries");
const package_config_1 = require("../helpers/package-config");
const postcssOptions = (0, config_1.getConfig)('postcss.config');
const babelOptions = (0, config_1.getConfig)('babel.config');
const cssLoaderOptions = (0, config_1.getConfig)('css-loader.config');
const ManifestPlugin = new webpack_assets_manifest_1.WebpackAssetsManifest({
    integrity: true,
    integrityHashes: ['sha384'],
    output: 'manifest.json',
});
const plugins = [
    new webpack_1.ProvidePlugin({
        jQuery: 'jquery',
        $: 'jquery',
    }),
    new mini_css_extract_plugin_1.default({
        filename: '[name].css',
        chunkFilename: '[name].[contenthash].css',
    }),
    new clean_webpack_plugin_1.CleanWebpackPlugin({
        // Remove all files except the `.running` file created by "Start".
        cleanOnceBeforeBuildPatterns: ['**/*', '!.running'],
    }),
    new webpack_subresource_integrity_1.SubresourceIntegrityPlugin({
        hashFuncNames: ['sha384'],
    }),
    new WebpackAssetsHash_1.default(ManifestPlugin),
    ManifestPlugin,
];
// Loads a thread, which verifies any TypeScript if a project has a "tsconfig.json" file.
if ('' !== (0, config_1.getTsConfigFile)()) {
    plugins.push(new fork_ts_checker_webpack_plugin_1.default({
        formatter: 'basic',
        typescript: {
            configFile: (0, config_1.getTsConfigFile)(),
        },
    }));
}
/**
 * Generate .br files if enabled.
 *
 * @note Will only generate files if 20% or more size is gained.
 * @see https://webpack.js.org/plugins/compression-webpack-plugin/#using-brotli
 */
if ((0, package_config_1.getPackageConfig)().brotliFiles) {
    plugins.push(new compression_webpack_plugin_1.default({
        algorithm: 'brotliCompress',
        deleteOriginalAssets: false,
        test: /\.(js|css)$/,
    }));
}
const config = {
    devtool: false,
    entry: (0, entries_1.getEntries)(),
    mode: 'production',
    stats: {
        assets: true,
        assetsSort: 'size',
        assetsSpace: 100,
        cachedModules: false,
        cachedAssets: true,
        children: false,
        colors: {
            // Change green to yellow, as my default terminal color is green.
            green: '\u001b[93m',
        },
        hash: false,
        groupAssetsByChunk: false,
        groupAssetsByEmitStatus: false,
        groupAssetsByExtension: false,
        groupAssetsByInfo: false,
        groupAssetsByPath: false,
        modules: false,
        timings: false,
        version: false,
    },
    optimization: {
        moduleIds: 'deterministic',
    },
    // Displays warnings of size limits.
    performance: {
        hints: 'warning',
    },
    externals: {
        jquery: 'jQuery',
    },
    target: 'browserslist:' + (0, config_1.getBrowsersList)().join(', '),
    output: {
        path: path_1.default.resolve((0, package_config_1.getPackageConfig)().workingDirectory, 'dist'),
        filename: '[name].js',
        publicPath: 'auto', // Change this if you want to use an external CDN etc.
        chunkFilename: '[name].[contenthash].js',
        crossOriginLoading: 'anonymous',
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.jsx', '.json', '.pcss'],
        modules: [
            path_1.default.resolve((0, package_config_1.getPackageConfig)().workingDirectory, 'src'),
            'node_modules',
        ],
    },
    plugins,
    module: {
        strictExportPresence: true,
        rules: [
            {
                test: /\.[jt]sx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                options: babelOptions,
            },
            {
                test: /\.css$/,
                use: [
                    mini_css_extract_plugin_1.default.loader,
                    'css-loader',
                    {
                        loader: 'clean-css-loader',
                        options: {
                            level: 2,
                            sourceMap: false,
                        },
                    },
                ],
            },
            {
                test: /\.pcss$/,
                use: [
                    mini_css_extract_plugin_1.default.loader,
                    {
                        loader: path_1.default.resolve(__dirname, '../lib/css-module-types.ts'),
                    },
                    {
                        loader: 'css-loader',
                        options: cssLoaderOptions,
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions,
                        },
                    },
                ].filter(loader => {
                    if (!(0, package_config_1.getPackageConfig)().cssTsFiles && 'object' === typeof loader) {
                        return loader.loader !== path_1.default.resolve(__dirname, '../lib/css-module-types.ts');
                    }
                    return true;
                }),
            },
        ],
    },
};
exports.default = config;
module.exports = config;
//# sourceMappingURL=webpack.dist.js.map