@atlascommunity/webpack-config NPM

Atlas Community Webpack config

Installation

yarn add --dev @atlascommunity/webpack-config

If you want use the js version of config, you don`t follow these steps

Install ts-node

yarn add --dev ts-node

You need webpack version more than 5.88.2

You need @atlascommunity/tsconfig-base version more than 1.1.3

Usage

Create webpack.config.ts in your project directory

Install a basic example

export default (env: BuildEnv): Configuration => {
  return {
    ...buildWebpack(configParams, mergeConfig),
    ...overrideConfig
  }
}

configParams - Base params for build config.

These parameters are required to run the config

export default (env: BuildEnv): Configuration => {
  return {
    ...buildWebpack({
      // Required params
      pluginName: "",
      pluginKey: "",
      mode: env.mode,
      projectDir: __dirname,
      //
    }, mergeConfig),
    ...overrideConfig
  }
}

These parameters are optional to run the config. If you use your own alias, entry, want to specify a frontend build directory other than the standard one, want to change wrmOptions or terserOptions, use these fields

export default (env: BuildEnv): Configuration => {
  return {
    ...buildWebpack({
      // Required params
      //...
      // Optional path params
        path: {
          entry: {},
          alias: {},
          // Install only in case of non-trivial folder paths, calculated automatically
          frontendSrcDir: "",
          frontendTargetDir: "",
          mvnOutputDir: ""
          //
        },
        pluginsOptions: {
          terserOptions: {},
          wrmOptions: {}
        }
      //
    }, mergeConfig),
    ...overrideConfig
  }
}

path - Recommended in path specify only alias and entry. Build folders are usually universal in every project and are calculated automatically

pluginsOptions - Options for wrm and terser plugin. Supports all fields and parameters to be specified in the corresponding plugins. It is recommended to specify contextMap for wrmOptions

IMPORTANT - The implementation already contains wrm-dependencies-conf.js and does not need to be specified separately. If you have a specific implementation, you can create and specify your own

mergeConfig - Optional. Object that fully supports webpack config parameters. Serves to merge the generated config and your parameters

overrideConfig - Optional. Serves to override config parameters

Libraries that can be removed

"postcss-loader"
"postcss-custom-media"
"postcss-easy-import"
"postcss-mixins"
"postcss-nested"
"postcss-preset-env"
"postcss-for"
"terser-webpack-plugin"
"webpack-cli"
"ts-loader"
"style-loader"
"css-loader"
"webpackbar"

Example Config

import { BuildEnv, buildWebpack } from '@atlascommunity/webpack-config'
import { Configuration } from 'webpack'
import path from "path";


export const PLUGIN_NAME = "app";
const APP_DIR = path.join('src');
export const PLUGIN_KEY = 'ru.mail.jira.plugins.app'
export const FRONTEND_SRC_DIR = path.join(__dirname);

export const alias = {
  '@common': path.join(FRONTEND_SRC_DIR, 'common'),
  'i18n': '@atlassian/wrm-react-i18n',
  "@app": path.join(FRONTEND_SRC_DIR, APP_DIR, 'app'),
}
export const entry = {
  'app': [path.join(FRONTEND_SRC_DIR, APP_DIR, 'index.tsx')],
}
export const contextMap = {
  'app': ['atl.general'],
}

export default (env: BuildEnv): Configuration => {
  return {
    ...buildWebpack({
      pluginName: PLUGIN_NAME,
      pluginKey: PLUGIN_KEY,
      mode: env.mode,
      projectDir: __dirname,
      paths: {
        entry: entry,
        alias: alias
      },
      pluginsOptions: {
        wrmOptions: {
          contextMap: contextMap
        }
      }
    })
  }
}