@pinuts/bsr-uikit-relaunch/webpack.config.js

BSR UI-KIT Relaunch

const path = require('path');
const packageConfig = require('./package.json');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const CopyPlugin = require('copy-webpack-plugin');

// read package.json -> use peerDependencies as externals
const externals = Object.keys(packageConfig.peerDependencies).map((dep) => {
    return { [dep]: dep}
});
const devMode = process.env.NODE_ENV === 'development';

const webpackCfg = {
    mode: process.env.NODE_ENV || 'production',
    entry: './src/index.js',
    output: {
        path: path.resolve('dist'),
        filename: 'index.js',
        libraryTarget: 'commonjs2'
    },
    externals,
    plugins: [
        new CopyPlugin({
            patterns: [
                {
                    from: 'src/styles',
                    to: 'styles',
                },
                {
                    from: 'src/assets',
                    to: 'assets',
                },
            ],
        }),
    ],
    module: {
        rules: [
            {
                test: /\.m?[jt]sx?$/,
                exclude: /(node_modules)/,
                use: 'babel-loader'
            },
            {
                test: /\.module\.scss$/i,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            modules: {
                                localIdentName: '[local]--[hash:base64:10]',
                            }
                        }
                    },
                ]
            },
            {
                test: /(?<!\.module)\.scss$/i,
                use: [
                    // Creates `style` nodes from JS strings
                    'style-loader',
                    // Translates CSS into CommonJS
                    'css-loader',
                    // Compiles Sass to CSS
                    'sass-loader',
                ]
            },
            {
                test: /\.(png|jpe?g|gif)$/i,
                use: [
                    {
                        loader: 'url-loader'
                    }
                ]
            },
            {
                test: /\.svg$/,
                use: [
                    { loader: 'babel-loader' },
                    {
                        loader: 'react-svg-loader',
                        options: {
                            jsx: true,
                            svgo: {
                                plugins: [
                                    {
                                        removeViewBox: false,
                                    },
                                ],
                            }
                        },
                    },
                ],
            },
            {
                test: /\.(eot|ttf|woff|woff2)$/i,
                type: 'asset/resource',
                generator: {
                    filename: 'fonts/[name][ext]'
                }
            },
        ]
    }
}
if (devMode) {
    webpackCfg.devtool = 'inline-source-map';
    webpackCfg.plugins.push(new BundleAnalyzerPlugin());
}

module.exports = webpackCfg;