gurubot2/webpack.config.js

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const Dotenv = require('dotenv-webpack');

const __DEV__ = process.env.NODE_ENV === 'development';

function sassLoader() {
    const common = [
        'css-loader',
        {
            loader: 'postcss-loader',
            options: {
                config: {
                    path: path.join(__dirname, 'src/sass/postcss.config.js')
                }
            }
        },
        'sass-loader',
        {
            loader: '@epegzz/sass-vars-loader',
            options: {
                syntax: 'scss',
                files: [
                    path.join(__dirname, 'src/constants/styles.js')
                ]
            }
        }
    ];

    if (__DEV__) {
        return ['style-loader', ...common];
    }

    return [MiniCssExtractPlugin.loader, ...common];
}

function getPlugins() {
    const common = [
        new HtmlWebpackPlugin({
            hash: true,
            template: './src/index.html',
            filename: 'index.html'
        }),
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify(process.env.NODE_ENV)
            }
        })
    ];

    if (__DEV__) {
        return [
            ...common,
            new webpack.HotModuleReplacementPlugin(),
            new Dotenv()
        ];
    }

    return [
        ...common,
        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: '[id].css'
        })
    ];
}

function getEntry() {
    const common = ['./src/index.js'];

    if (__DEV__) {
        return [
            'webpack/hot/only-dev-server',
            'webpack-hot-middleware/client?reload=true',
            'react-hot-loader/patch',
            ...common
        ];
    }

    return common;
}

module.exports = {
    entry: getEntry(),
    devtool: __DEV__
        ? 'cheap-module-eval-source-map'
        : false,
    mode: process.env.NODE_ENV,
    output: {
        path: path.join(__dirname, 'static'),
        publicPath: process.env.PUBLIC_PATH || '/',
        filename: '[name].bundle.js?v=[hash]',
        globalObject: 'this'
    },
    module: {
        rules: [
            {
                test: /\.html$/,
                use: {
                    loader: 'html-loader',
                    options: { minimize: true }
                }
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader'
            },
            {
                test: /workers\/(.*)\.js$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'worker-loader',
                        options: {
                            name: '[name].worker.js',
                            inline: true
                        }
                    },
                    'babel-loader'
                ]
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                use: sassLoader()
            },
            {
                test: /\.css$/,
                use: 'css-loader'
            },
            {
                test: /\.(png|jpg)$/,
                exclude: [/node_modules/, /favicon\.png/],
                use: 'file-loader'
            },
            {
                test: /\.svg$/,
                exclude: /node_modules/,
                use: 'svg-react-loader'
            },
            {
                test: /favicon\.png/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: 'favicon.ico',
                        publicPath: '../'
                    }
                }
            }
        ]
    },
    resolve: {
        alias: {
            actions: path.resolve(__dirname, 'src/actions'),
            components: path.resolve(__dirname, 'src/components'),
            constants: path.resolve(__dirname, 'src/constants'),
            containers: path.resolve(__dirname, 'src/containers'),
            reducers: path.resolve(__dirname, 'src/reducers'),
            sagas: path.resolve(__dirname, 'src/sagas'),
            selectors: path.resolve(__dirname, 'src/selectors'),
            variables: path.resolve(__dirname, 'src/sass/variables.scss'),
            sprite: path.resolve(__dirname, 'src/images/sprite/sprite.scss')
        }
    },
    optimization: {
        minimize: !__DEV__,
        splitChunks: {
            chunks: 'all',
            name: 'common'
        }
    },
    plugins: getPlugins()
};