lasso migration webpack.config.js

require('dotenv').config();
const path = require('path');
const webpack = require('webpack');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const MarkoPlugin = require('@marko/webpack/plugin').default;
const CSSExtractPlugin = require('mini-css-extract-plugin');
const SpawnServerPlugin = require('spawn-server-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const nodeExternals = require('webpack-node-externals');
const {NODE_ENV} = process.env;
const isProd = NODE_ENV === 'production';
const isDev = !isProd;
const markoPlugin = new MarkoPlugin();
const spawnedServer = isDev && new SpawnServerPlugin();

/**
 * @description Combines the shared configuration with the passed-in configuration object
 * @param {object} config - The configuration to merge
 */
function merge(config) {
  return {
    ...config,
    optimization: {nodeEnv: false, ...config.optimization},
    mode: isProd ? 'production' : 'development',
    devtool: isProd ? 'source-map' : 'inline-source-map',
    output: {
      publicPath: '/static/',
      ...config.output,
    },
    resolve: {extensions: ['.js', '.json', '.marko']},
    module: {
      rules: [
        ...(config.module ? config.module.rules : []),
        // {
        //   test: /\.js$/,
        //   exclude: /node_modules/,
        //   loader: 'babel-loader',
        // },
        {
          test: /\.marko$/,
          loader: '@marko/webpack/loader',
        },
        {
          test: /\.s?css$/,
          use: [CSSExtractPlugin.loader, 'css-loader', 'sass-loader'],
        },
        {
          test: /\.svg/,
          loader: 'svg-url-loader',
        },
        // TODO: Needed?
        {
          test: /\.(jpg|jpeg|gif|png|eot|woff2?|ttf)$/,
          loader: 'file-loader',
          options: {
            // File assets from server & browser compiler output to client folder.
            outputPath: '../client',
          },
        },
      ],
    },
    plugins: [...config.plugins, isProd && new CleanWebpackPlugin()].filter(Boolean),
  };
}

module.exports = [
  merge({
    name: 'Client',
    optimization: {
      splitChunks: {
        chunks: 'all',
        maxInitialRequests: 3,
      },
    },
    output: {
      filename: '[name].[contenthash:8].js',
      path: path.join(__dirname, 'dist/client'),
    },
    devServer: isDev ? {
      overlay: true,
      stats: 'minimal',
      contentBase: false,
      ...spawnedServer.devServerConfig,
    } : undefined,
    plugins: [
      new webpack.DefinePlugin({'process.browser': true}),
      new CSSExtractPlugin({filename: '[name].[contenthash:8].css'}),
      isProd && new OptimizeCssAssetsPlugin(),
      markoPlugin.browser,
    ],
  }),
  merge({
    name: 'Server',
    entry: './index.js',
    target: 'async-node',
    optimization: {minimize: false},
    output: {
      libraryTarget: 'commonjs2',
      path: path.join(__dirname, 'dist/server'),
    },
    externals: [
      nodeExternals({
        whitelist: [/\.(?!(?:jsx?|json)$).{1,5}$/i],
      }),
      'worker_threads',
      'child_process',
      'fs',
      'socket.io',
      'redis',
    ],
    plugins: [
      new webpack.DefinePlugin({
        'process.browser': undefined,
        'process.env.BUNDLE': true,
      }),
      new webpack.BannerPlugin({
        banner: 'require("source-map-support").install();',
        raw: true,
      }),
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
      }),
      new CSSExtractPlugin({filename: '[name].[contenthash:8].css'}),
      isDev && spawnedServer,
      markoPlugin.server,
    ],
    module: {
      rules: [{
        test: /.*\.min\.js/,
        use: 'null-loader',
      }],
    },
  }),
];