webpack.config.js

const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals');
const {
  createConfig,

  // Feature blocks
  typescript,

  // Production blocks
  uglify,

  // Helper blocks
  setMode,
  entryPoint,
  setOutput,
  customConfig,
  sourceMaps,
  addPlugins,
  env,
  resolve,
  performance,
  setEnv,
} = require('webpack-blocks');
const path = require('path');

const cwd = process.cwd();

const paths = {
  src: path.resolve(cwd, 'src'),
  nodeModules: path.resolve(cwd, 'node_modules'),
  build: path.resolve(cwd, 'build', 'web'),
  buildPublic: path.resolve(cwd, 'build', 'web', 'public'),
  assetsPath: '/public/',
};

const generateConfig = (envVars = null, argv = null, type = 'server') => {
  const blocks = [
    setMode(process.env.NODE_ENV || 'development'),
    resolve({modules: [paths.src, paths.nodeModules]}),
    typescript(),
    setEnv({
      NODE_ENV: process.env.NODE_ENV
    }),
    customConfig({
      module: {
        rules: [
          {
            test: /\.graphqls$/,
            use: 'raw-loader'
          }
        ]
      }
    }),
  ];

  if (type === 'server') {
    blocks.push(
      env('production', [
        entryPoint('./src/target/web/server.tsx'),
      ]),
      env('development', [
        entryPoint('./src/devServer.tsx'),
      ]),
      sourceMaps('source-map'),
      setOutput({
        path: paths.build,
        publicPath: paths.assetsPath,
        filename: 'server.js',
      }),
      customConfig({
        target: 'node',
        externals: [nodeExternals()],
        stats: 'errors-only',
      }),
      addPlugins([
        new webpack.ProgressPlugin(),
      ])
    );
  }

  if (type === 'browser') {
    blocks.push(
      sourceMaps('eval'),
      entryPoint('./src/target/web/client.tsx'),
      setOutput({
        path: paths.buildPublic,
        publicPath: paths.assetsPath,
        filename: 'client.js',
      }),
      customConfig({
        target: 'web',
      }),
      env('production', [
        sourceMaps('source-map'),
        uglify({
          parallel: true,
        }),
      ]),
      env('development', [
        sourceMaps(),
        addPlugins([
          new webpack.NamedModulesPlugin(),
          new webpack.LoaderOptionsPlugin({
            debug: true,
            options: {
              tslint: {
                failOnHint: true
              },
            }
          })
        ]),
        customConfig({
          devServer: {
            overlay: {
              warnings: true,
              errors: true
            }
          }
        }),
        performance({
          // Increase performance budget thresholds for development mode
          maxAssetSize: 1500000,
          maxEntrypointSize: 1500000
        })
      ]),
    );
  }

  return createConfig(blocks);
};

module.exports = generateConfig;

if (process.env.NODE_ENV === 'production') {
  module.exports = [
    generateConfig(null, null, 'server'),
    generateConfig(null, null, 'browser'),
  ];
}