asb_cloud_front/webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { HotModuleReplacementPlugin, SourceMapDevToolPlugin } = require('webpack')
const InterpolateHtmlPlugin = require('interpolate-html-plugin')

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

module.exports = {
    entry: './src/index.tsx',
    devtool: 'source-map',
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: '[name].[contenthash:8].js',
        publicPath: '/',
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendors',
                    chunks: 'all',
                },
            },
        },
    },
    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' ],
    },
    devServer: {
        historyApiFallback: true,
        port: 3000,
        proxy: {
            context: ['/api', '/auth', '/hubs'],
            target: proxy,
        },
    },
    stats: 'errors-warnings',
    // {
    //     colors: true,
    //     hash: false,
    //     version: false,
    //     timings: false,
    //     assets: false,
    //     chunks: false,
    //     modules: false,
    //     reasons: false,
    //     children: false,
    //     source: false,
    //     errors: false,
    //     errorDetails: false,
    //     warnings: false,
    //     publicPath: false,
    // },
    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: /\.css$/i,
                use: [ 'style-loader', 'css-loader' ],
            },
            {
                test: /\.less$/i,
                use: [
                    'style-loader',
                    'css-loader',
                    {
                        loader: 'less-loader',
                        options: {
                            lessOptions: {
                                javascriptEnabled: true,
                            },
                        },
                    },
                ],
            },
            {
                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 HotModuleReplacementPlugin(),
        new InterpolateHtmlPlugin({ PUBLIC_URL: 'static' }),
        new SourceMapDevToolPlugin({ filename: '[file].map' }),
        new HtmlWebpackPlugin({ template: './public/index.html' }),
    ],
}