salix/front/webpack.config.js

require('require-yaml');
const webpack = require('webpack');
const path = require('path');
const merge = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');

let env = process.env.NODE_ENV || 'development';
let mode = env == 'development' ? env : 'production';

let baseConfig = {
    entry: {salix: 'salix'},
    mode,
    output: {
        path: path.join(__dirname, 'dist'),
        publicPath: '/'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                options: {
                    presets: ['@babel/preset-env'],
                    plugins: ['@babel/plugin-syntax-dynamic-import']
                }
            }, {
                test: /\.yml$/,
                use: ['json-loader!yaml-loader']
            }, {
                test: /\.html$/,
                loader: 'html-loader',
                options: {
                    attrs: [
                        'img:src',
                        'link:href'
                    ]
                }
            }, {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }, {
                test: /\.scss$/,
                use: [
                    'style-loader', 'css-loader', {
                        loader: 'sass-loader',
                        options: {
                            // XXX: Don't work in Firefox
                            // https://github.com/webpack-contrib/style-loader/issues/303
                            // sourceMap: true,
                            sassOptions: {
                                includePaths: [
                                    path.resolve(__dirname, 'front/core/styles/')
                                ]
                            }
                        }
                    }
                ]
            }, {
                test: /\.(woff(2)?|ttf|eot|svg|png)(\?v=\d+\.\d+\.\d+)?$/,
                type: 'asset/resource',
            }, {
                test: /manifest\.json$/,
                type: 'javascript/auto',
                loader: 'file-loader',
                options: {
                    esModule: false,
                }
            }
        ]
    },
    optimization: {
        runtimeChunk: true,
        splitChunks: {
            chunks: 'all',
        }
    },
    resolve: {
        modules: [
            `front`,
            `modules`,
            `front/node_modules`,
            `node_modules`
        ],
        alias: {
            'vn-loopback': `${__dirname}/loopback`
        }
    },
    watchOptions: {
        ignored: [
            'node_modules',
            './modules/*/back/**'
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'front/salix/index.ejs',
            favicon: 'front/salix/favicon.ico',
            filename: 'index.html',
            chunks: ['salix']
        }),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(env)
        })
    ],
    devtool: 'source-map',
    stats: {
        assets: false,
        modules: false,
        children: false,
        entrypoints: false,
        colors: true,
        errorDetails: true
    }
};

let prodConfig = {
    output: {
        filename: '[name].[chunkhash].js',
        chunkFilename: '[id].[chunkhash].js'
    },
    plugins: [
        new webpack.ids.HashedModuleIdsPlugin()
    ],
    performance: {
        maxEntrypointSize: 2000000,
        maxAssetSize: 2000000
    }
};

let devConfig = {
    output: {
        filename: '[name].js',
        chunkFilename: '[id].js'
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],
    devServer: {
        host: '0.0.0.0',
        port: 5000,
        publicPath: '/',
        contentBase: 'dist',
        quiet: false,
        noInfo: false,
        hot: true,
        inline: true,
        stats: baseConfig.stats,
        proxy: {
            '/api': 'http://back:3000',
            '/*/api/**': {
                target: 'http://back:3000',
                pathRewrite: {'^/[\\w-]+': ''}
            }
        }
    }
};

let mrgConfig = mode === 'development' ? devConfig : prodConfig;
module.exports = merge(baseConfig, mrgConfig);