asb_cloud_front/webpack.config.base.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const InterpolateHtmlPlugin = require('interpolate-html-plugin')

const proxy = require('./package.json').proxy

module.exports = {
    entry: './src/index.tsx',
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: '[name].[contenthash:8].js',
        publicPath: '/',
    },
    devServer: {
        historyApiFallback: true,
        port: 3000,
        proxy: {
            context: ['/api', '/auth', '/hubs'],
            target: proxy,
        },
        client: {
            overlay: {
                errors: true,
                warnings: false,
            },
            progress: true,
        },
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendors',
                    chunks: 'all',
                },
            },
        },
        removeAvailableModules: true,
        removeEmptyChunks: true,
        mergeDuplicateChunks: true,
        providedExports: true,
        runtimeChunk: true,
    },
    resolve: {
        fallback: { 'path': require.resolve('path-browserify') }, // TODO: Remove
        modules: [path.join(__dirname, 'src'), 'node_modules'],
        alias: {
            react: path.join(__dirname, 'node_modules', 'react'),

            '@asb': path.resolve(__dirname, 'src'),
            '@api': path.resolve(__dirname, 'src/services/api'),
            '@components': path.resolve(__dirname, 'src/components'),
            '@services': path.resolve(__dirname, 'src/services'),
            '@pages': path.resolve(__dirname, 'src/pages'),
            '@utils': path.resolve(__dirname, 'src/utils'),
            '@images': path.resolve(__dirname, 'src/images'),
            '@styles': path.resolve(__dirname, 'src/styles'),
        },
        extensions: [ '', '.tsx', '.ts', '.jsx', '.js', '.json', '.d.ts', '.svg', '.png' ],
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                enforce: 'pre',
                use: [ 'source-map-loader' ],
            },
            {
                test: /\.m?jsx?$/i,
                exclude: /node_modules/,
                use: [ 'babel-loader' ],
            },
            {
                test: /\.m?tsx?$/i,
                exclude: /node_modules/,
                use: [ 'babel-loader', 'ts-loader' ],
            },
            {
                test: /\.(jpe?g|gif|png)$/i,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            publicPath: '/images/',
                            outputPath: 'images',
                            name: '[name].[contenthash:8].[ext]',
                        },
                    },
                ],
            },
            {
                test: /\.svg$/i,
                issuer: /\.m?[jt]sx?$/,
                use: [
                    '@svgr/webpack',
                    {
                        loader: 'file-loader',
                        options: {
                            publicPath: '/images/svg/',
                            outputPath: 'images/svg',
                            name: '[name].[contenthash:8].[ext]',
                        },
                    },
                ],
            },
        ],
    },
    plugins: [
        new InterpolateHtmlPlugin({ PUBLIC_URL: 'static' }),
        new HtmlWebpackPlugin({ template: './public/index.html' }),
    ],
}