sample webpack.config.js

webpack.config.js

/* eslint-disable camelcase */

const os = require('os');
const path = require('path');
const webpack = require('webpack');
const webpackNodeExternals = require('webpack-node-externals');
const TerserPlugin = require('terser-webpack-plugin');

const Client = (env, argv) => {
  const { mode } = argv;
  return {
    devtool: mode === 'development'
      ? 'source-map'
      : false,
    entry: [
      '@babel/polyfill',
      './src/client/Client.jsx',
    ],
    resolve: {
      extensions: [
        '.js',
        '.jsx',
      ],
    },
    module: {
      rules: [
        {
          enforce: 'pre',
          test: /\.(js|jsx)$/,
          use: 'eslint-loader',
          exclude: /node_modules/,
        },
        {
          test: /\.worker\.js$/,
          use: [
            {
              loader: 'worker-loader',
              options: {
                name: '[name].js',
                publicPath: '/scripts/',
              },
            },
          ],
        },
        {
          test: /\.(js|jsx)$/,
          use: 'babel-loader',
          exclude: /node_modules/,
        },
        {
          test: /\.(css)$/,
          use: [
            'style-loader',
            'css-loader',
          ],
        },
        {
          test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
          use: [
            {
              loader: 'file-loader',
              options: {
                name: '[name].[ext]',
                outputPath: 'fonts/',
              },
            },
          ],
        },
      ],
    },
    plugins: [
      new webpack.DefinePlugin({
        ENVIRONMENT: JSON.stringify(mode),
      }),
    ],
    optimization: {
      splitChunks: {
        chunks: 'all',
      },
      minimize: Boolean(mode === 'production'),
      minimizer: [
        new TerserPlugin({
          parallel: os.cpus().length,
          cache: true,
          terserOptions: {
            output: {
              comments: false,
            },
            compress: {
              dead_code: true,
            },
            mangle: true,
          },
          sourceMap: true,
        }),
      ],
    },
    output: {
      path: path.join(__dirname, '/dist/client'),
      publicPath: '/scripts/',
    },
    stats: 'minimal',
  };
};

const Server = (env, argv) => {
  const { mode } = argv;
  return {
    devtool: mode === 'development'
      ? 'source-map'
      : false,
    entry: ['./src/server/Server.js'],
    resolve: {
      extensions: [
        '.js',
        '.jsx',
      ],
    },
    target: 'node',
    node: {
      __dirname: false,
      __filename: false,
    },
    externals: [webpackNodeExternals()],
    module: {
      rules: [
        {
          enforce: 'pre',
          test: /\.(js|jsx)$/,
          use: 'eslint-loader',
          exclude: /node_modules/,
        },
        {
          test: /\.(js|jsx)$/,
          use: 'babel-loader',
          exclude: /node_modules/,
        },
      ],
    },
    plugins: [
      new webpack.DefinePlugin({
        // 'development' if we use ./node_modules/.bin/webpack --mode=development
        // 'production' if we use ./node_modules/.bin/webpack --mode=production
        ENVIRONMENT: JSON.stringify(mode),

        LETSENCRYPT_EMAIL: JSON.stringify('[email protected]'),

        LETSENCRYPT_DOMAINS: JSON.stringify(['mydomain.xyz', 'www.mydomain.xyz']),
      }),
    ],
    output: {
      path: path.join(__dirname, '/dist/server'),
    },
  };
};

module.exports = [
  Client,
  Server,
];