salix/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');
const AssetsWebpackPlugin = require('assets-webpack-plugin');
const wpConfig = require('./webpack.config.yml');

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

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, 'front/salix/styles')
                            ]
                        }
                    }
                ]
            }, {
                test: /\.(svg|png|ttf|woff|woff2)$/,
                loader: 'file-loader'
            }
        ]
    },
    optimization: {
        runtimeChunk: true,
        splitChunks: {
            chunks: 'all',
        }
    },
    resolve: {
        modules: [
            `front`,
            `modules`,
            `front/node_modules`,
            `node_modules`
        ],
        alias: {
            'vn-loopback': `${__dirname}/loopback`
        }
    },
    plugins: [
        new AssetsWebpackPlugin({
            path: outputPath
        }),
        new HtmlWebpackPlugin({
            template: 'front/salix/index.ejs',
            filename: 'index.html',
            chunks: ['salix']
        })
    ],
    devtool: 'source-map',
    stats: {
        modules: false,
        assets: false,
        children: false,
        entrypoints: 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: 'localhost',
        port: wpConfig.devServerPort,
        publicPath: '/',
        contentBase: wpConfig.buildDir,
        quiet: false,
        noInfo: false,
        // hot: true,
        stats: baseConfig.stats
    }
};

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