salix/webpack.config.js

require('require-yaml');
const webpack = require('webpack');
const path = require('path');
const merge = require('webpack-merge');
const AssetsWebpackPlugin = require('assets-webpack-plugin');
const wpConfig = require('./webpack.config.yml');

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

let outputPath = path.join(__dirname, wpConfig.buildDir);

let baseConfig = {
    entry: wpConfig.entry,
    mode: mode,
    output: {
        path: outputPath,
        publicPath: `${wpConfig.publicPath}/`
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['@babel/preset-env']
                }
            }, {
                test: /\.yml$/,
                loader: 'json-loader!yaml-loader'
            }, {
                test: /\.html$/,
                loader: 'html-loader'
            }, {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            }, {
                test: /\.scss$/,
                use: [
                    {loader: 'style-loader'},
                    {loader: 'css-loader'},
                    {
                        loader: 'sass-loader',
                        options: {
                            includePaths: [
                                path.resolve(__dirname, 'client/salix/src/styles')
                            ]
                        }
                    }
                ]
            }, {
                test: /\.(svg|png|ttf|woff|woff2)$/,
                loader: 'file-loader'
            }
        ]
    },
    optimization: {
        splitChunks: {
            chunks: 'all',
        },
        runtimeChunk: true
    },
    resolve: {
        modules: [
            `${__dirname}/client`,
            __dirname,
            'node_modules'
        ],
        alias: {
            'vn-loopback': `${__dirname}/services/loopback`
        }
    },
    plugins: [
        new AssetsWebpackPlugin({
            path: outputPath
        })
    ],
    devtool: 'source-map',
    stats: {
        modules: false,
        colors: true
    }
};

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

let devConfig = {
    output: {
        filename: '[name].js',
        chunkFilename: '[id].js'
    },
    devServer: {
        host: '127.0.0.1',
        port: wpConfig.devServerPort,
        publicPath: '/',
        contentBase: wpConfig.buildDir,
        quiet: false,
        noInfo: false,
        // hot: true,
        stats: baseConfig.stats
    }
};

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