base.config.js

const webpack = require('webpack');
const { identity } = require('lodash');
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const path = require('path');
const cssVariables = require('../../../css/css-variables.js');
const config = require('../../config');

const inlineRegex = /inline\.(js|jsx|ts|tsx)$/;

module.exports = (options) => {
  const { mode, target } = options;

  return {
    resolve: {
      extensions: ['.js', '.jsx', '.ts', '.tsx'],
    },
    devtool:
      mode === 'production' ? 'source-map' : 'cheap-module-eval-source-map',
    plugins: [
      new MiniCssExtractPlugin({
        filename: '[name].[contenthash:6].css',
        chunkFilename: '[name].[contenthash:6].css',
      }),
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify(
          mode === 'production' ? 'production' : 'development'
        ),
        'process.env.IS_BROWSER': target !== 'node',
      }),
    ],
    target,
    mode,
    optimization: {
      minimizer:
        mode === 'production' && target !== 'node'
          ? [
              new TerserPlugin({
                parallel: true,
                cache: true,
                terserOptions: {
                  output: {
                    comments: false,
                  },
                  compress: target !== 'node',
                },
                sourceMap: true,
              }),
              new OptimizeCSSAssetsPlugin({
                cssProcessorOptions: {
                  zindex: false,
                },
              }),
            ]
          : [],
      noEmitOnErrors: true,
    },
    module: {
      rules: [
        {
          test: inlineRegex,
          exclude: /node_modules/,
          use: [
            'raw-loader',
            'uglify-es-loader',
            {
              loader: 'babel-loader',
              options: {
                babelrc: false,
                presets: [path.resolve('./tasks/babel/inline.js')],
              },
            },
          ],
        },
        {
          // test: /^((?!\.inline).)*(js|jsx)$/,
          test: /^((?!\.inline).)*(js|jsx|ts|tsx)$/,
          include: [
            path.resolve('./app'),
            path.resolve('./apps'),
            path.resolve('./css'),
          ],
          exclude: [path.resolve('./lib')],
          use: [
            {
              loader: 'babel-loader',
              options: {
                babelrc: false,
                presets: [
                  path.resolve(
                    `./tasks/babel/${target === 'node' ? 'server' : 'client'}${
                      mode === 'production' ? '.prod' : '.dev'
                    }.js`
                  ),
                ],
              },
            },
          ],
        },
        {
          test: /\.toString\.css$/,
          use: [
            'to-string-loader',
            'css-loader',
            {
              loader: 'postcss-loader',
              options: {
                plugins: [
                  require('autoprefixer')(),
                  require('postcss-mixins')(),
                  require('postcss-simple-vars')({ variables: cssVariables }),
                  require('postcss-calc')(),
                  require('postcss-nesting')(),
                  ...(mode === 'production'
                    ? [
                        require('cssnano')({
                          preset: 'default',
                        }),
                      ]
                    : []),
                ],
              },
            },
          ],
        },
        {
          test: /\.global\.css$/,
          use: [
            target === 'node'
              ? null
              : mode === 'production'
              ? MiniCssExtractPlugin.loader
              : {
                  loader: 'style-loader',
                },
            'css-loader',
            {
              loader: 'postcss-loader',
              options: {
                plugins: [
                  require('autoprefixer')(),
                  require('postcss-mixins')(),
                  require('postcss-simple-vars')({ variables: cssVariables }),
                  require('postcss-calc')(),
                  require('postcss-nesting')(),
                  ...(mode === 'production'
                    ? [
                        require('cssnano')({
                          preset: 'default',
                        }),
                      ]
                    : []),
                ],
              },
            },
          ].filter(identity),
        },
        {
          test: /\.css$/i,
          exclude: [/\.global\.css$/, /\.toString\.css$/],
          use: [
            target === 'node'
              ? null
              : mode === 'production'
              ? MiniCssExtractPlugin.loader
              : {
                  loader: 'style-loader',
                },
            {
              loader: 'css-loader',
              options: {
                ...(target === 'node'
                  ? {
                      onlyLocals: true,
                    }
                  : {}),
                importLoaders: 1,
                modules: {
                  mode: 'local',
                  localIdentName:
                    mode === 'production'
                      ? '[sha1:hash:base64:8]'
                      : '[folder]-[name]_[local]-[hash:base64:5]',
                },
              },
            },
            {
              loader: 'postcss-loader',
              options: {
                plugins: [
                  require('autoprefixer')(),
                  require('postcss-mixins')(),
                  require('postcss-simple-vars')({ variables: cssVariables }),
                  require('postcss-calc')(),
                  require('postcss-nesting')(),
                ],
              },
            },
          ].filter(identity),
        },
        {
          test: /\.svg$/,
          use: [
            {
              loader: '@svgr/webpack',
              options: {
                icon: true,
              },
            },
          ],
        },
        {
          test: /\.(gif|png|jpe?g)$/i,
          use: [
            {
              loader: 'file-loader',
              options: {
                publicPath: config.paths.public_assets_path,
                outputPath: `../${config.paths.build_dest}`,
              },
            },
            {
              loader: 'image-webpack-loader',
            },
          ],
        },
      ],
    },
  };
};