webpack.config.js

   1 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
   2 const nodeExternals = require('webpack-node-externals');
   3 const path = require('path');
   4
   5 module.exports = function (env, _) {
   6   const base = {
   7     // mode: "production",
   8     mode: 'development',
   9     entry: './src/server/index.tsx', // Point to main file
  10     output: {
  11       path: path.resolve(process.cwd(), 'dist'),
  12       filename: 'js/server.js',
  13       publicPath: '/',
  14     },
  15     resolve: {
  16       extensions: ['.js', '.jsx', '.ts', '.tsx'],
  17     },
  18     performance: {
  19       hints: false,
  20     },
  21     module: {
  22       rules: [
  23         {
  24           test: /\.(scss|css)$/i,
  25           use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
  26         },
  27         {
  28           test: /\.(js|jsx|tsx|ts)$/, // All ts and tsx files will be process by
  29           loaders: 'babel-loader', // first babel-loader, then ts-loader
  30           exclude: /node_modules/, // ignore node_modules
  31         },
  32       ],
  33     },
  34     devServer: {
  35       host: '0.0.0.0',
  36       contentBase: 'src/',
  37       historyApiFallback: true,
  38     },
  39     plugins: [
  40       new MiniCssExtractPlugin({
  41         filename: 'styles/styles.css',
  42       }),
  43     ],
  44   };
  45
  46   // server-specific configuration
  47   if (env.platform === 'server') {
  48     base.target = 'node';
  49     base.externals = [nodeExternals()];
  50   }
  51   // client-specific configurations
  52   if (env.platform === 'client') {
  53     base.entry = './src/client/index.tsx';
  54     base.output.filename = 'js/client.js';
  55   }
  56   return base;
  57 };