ironbar-persea/webpack.config.js

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const webpack = require('webpack');

module.exports = (config) => {

  if ('production' === config.mode) {
    return [config, module.exports.webpackConfig()];
  }
  else {
    return config;
  }
};

const SOURCE_PATH = process.env.SOURCE_PATH || '/var/node/src';
const OUTPUT_PATH = process.env.OUTPUT_PATH || '/var/node/dist';

const hashFormat = {
  chunk: ('production' === process.env.NODE_ENV) ? '.[chunkhash:20]' : '',
}

module.exports.webpackConfig = function() {

  const styleDirectory = path.join(SOURCE_PATH, 'styles');
  const cssPrefix = '!style-loader!css-loader!';
  const scssPrefix = `${cssPrefix}sass-loader!`;

  const config = {
    mode: 'production' !== process.env.NODE_ENV ? 'development' : 'production',
    entry: {
      index: [
        '@babel/polyfill',
        path.join(SOURCE_PATH, 'frontend', 'index.js'),
      ],
      style: [
        path.join(cssPrefix, styleDirectory, 'reset.css'),
        path.join(scssPrefix, styleDirectory, 'global.scss'),
      ],
    },
    optimization: {
      splitChunks: {
        cacheGroups: {
          commons: {
            test: /(node_modules\/(?!contempo|@avocado|@truss))/,
            name: 'vendor',
            chunks: 'all',
          }
        }
      }
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: [
            /(node_modules\/(?!contempo|@avocado|@truss))/,
          ],
          use: {
            loader: 'babel-loader',
            options: {
              babelrcRoots: [
                OUTPUT_PATH,
              ],
              plugins: [
                'babel-plugin-redux-saga',
                ['@babel/plugin-proposal-decorators', {
                  legacy: true,
                }],
                '@babel/plugin-proposal-class-properties',
                '@babel/plugin-proposal-object-rest-spread',
                '@babel/plugin-syntax-dynamic-import',
                'react-hot-loader/babel',
              ],
              presets: [
                '@babel/preset-react',
                '@babel/preset-env',
              ],
            },
          },
        },
        {
          test: /\.css$/,
          use: [{
            loader: 'raw-loader',
          }],
        },
        {
          test: /\.scss$/,
          use: [{
            loader: 'raw-loader',
          }, {
            loader: 'sass-loader',
            options: {
              sourceMap: 'production' !== process.env.NODE_ENV,
            },
          }],
        },
      ],
    },
    node: {
      fs: 'empty',
    },
    output: {
      filename: `[name]${hashFormat.chunk}.js`,
      chunkFilename: `[id]${hashFormat.chunk}.chunk.js`,
      path: path.join(OUTPUT_PATH, 'frontend'),
    },
    plugins: [
      new HtmlWebpackPlugin({
        title: 'Truss',
        template: path.join(SOURCE_PATH, 'frontend', 'index.html'),
      }),
    ],
    resolve: {
      modules: [path.join(OUTPUT_PATH, 'node_modules')],
    },
    resolveLoader: {
      modules: [path.join(OUTPUT_PATH, 'node_modules')],
    },
  };

  if ('production' === config.mode) {
    config.optimization.minimizer = [
      new UglifyJsPlugin({cache: false})
    ];
  }
  else {
    config.devtool = 'eval-source-map';
    config.plugins.push(new webpack.HotModuleReplacementPlugin());
  }

  return config;
}