Type alias WebpackOptions

Type declaration

• Optional cdn?: WebpackCdnOptions

  Options for if you need to serve your assets from a CDN server

  When should you use this:

  • You need to serve your assets from a CDN server that gives URLs that are:

  1. Changes original asset filenames
  2. Gives a different URL for each asset file

  • or if you need to set a publicPath other than "auto". Normally, webpack can auto detect the correct base URL, but if that doesn't work and you know ahead of time what it can be, you can set it.

  • If "auto" doesn't work and you don't know ahead of time what publicPath should be, then you would need CDN mapping.

  About how CDN and mapping affects publicPath

  • Without CDN mapping, for module federation remote assets to work, it must set publicPath to "auto".
  • In development mode, webpack dev server serves the assets and CDN options will have no effect, and publicPath is forced to be the following:

    • module federation remote assets - "auto"
    • normal assets - "/js"

• Optional cdnHostname?: string

  Host name to use for CDN simulation, see option cdnProtocol for more info.

  • If not set, then check env WEBPACK_DEV_CDN_HOST

• Optional cdnPort?: number

  Host name to use for CDN simulation, see option cdnProtocol for more info.

  • If not set, then check env WEBPACK_DEV_CDN_PORT

• Optional cdnProtocol?: string

  Using a built-in reverse proxy, the webpack dev assets are served from the same host and port as the app. In that case, the URLs to assets are relative without protocol, host, port.

  However, user can simulate CDN server with the proxy and have assets URLs specifying different host/port from the app. To do that, the following should be defined.

  • If not set, then check env WEBPACK_DEV_CDN_PROTOCOL

• Optional cssModuleSupport?: boolean | RegExp | "all" | "byModExt" | "cssOnly"

  Configure CSS module support.

  Settings:

  1. true or "cssOnly" (default): CSS module for any file with .css extension
  2. RegExp: CSS module for any file that matches the custom RegExp
  3. "all": CSS module for all style files (css, styl, sass, scss)
  4. "byModExt": Use the preset RegExp that matches any file ending with .mod.{ext} or .module.{ext} ie: /\.(mod|module)\.(css|styl|sass|scss)$/i
  5. false: Disable CSS module completely

  • Legacy: You can also set this option with env CSS_MODULE_SUPPORT.

• Optional devArtifactsPath?: string

  in dev mode, all webpack output are saved to memory only, but some files like stats.json are needed by different uses and the stats partial saves a copy to disk. It will use this as the path to save the file.

  • Default: .etmp
  • If not set, then check env WEBPACK_DEV_ARTIFACTS_PATH

• Optional devHostname?: string

  Host name to use for webpack dev URL. Default: localhost

  • If not set, then check env WEBPACK_HOST, then WEBPACK_DEV_HOST, and finally HOST

• Optional devPort?: number

  In dev mode, this sets the proxy forward port for the webpack dev server. If it's not defined or 0, then a randomly available port is picked every time.

  • Default: 0 - pick a random port

  • If not set, then check env WEBPACK_DEV_PORT

  .

• Optional enableBabelPolyfill?: boolean

  Enable loading @babel/polyfill for application

  • Default: false

• Optional enableHotModuleReload?: boolean

  Support hot module reload for your web app code

  • Default: true
  • if not set, then we check env WEBPACK_HOT_MODULE_RELOAD

• Optional enableNodeSourcePlugin?: boolean

  Enable webpack's NodeSourcePlugin to simulate node.js libs in browser

  • Default: false
  • If not set, then check env ENABLE_NODESOURCE_PLUGIN

  "@remarks" This will bundle 100K+ of JavaScript to simulate node.js env

• Optional enableShortenCSSNames?: boolean

  If CSS module is used, then use a shorten class name for CSS in production mode

  • Default: true
  • if not set, then we check env ENABLE_SHORTEN_CSS_NAMES

• Optional enableWarningsOverlay?: boolean

  If hot module reload is enabled, then if you make a change that has error, then an overlay on top of the browser page will show the error.

  • Default: true
  • if not set, then we check env WEBPACK_DEV_WARNINGS_OVERLAY

• Optional loadDlls?: Record<any, unknown>

  Custom object with list of webpack DLLs to load

  • Default: {}
  • if not set, then we check env: ELECTRODE_LOAD_DLLS (which should be a JSON string)
  • TBD: define type for it

• Optional minify?: boolean

  Should webpack minify code output in production mode?

  • Default: true
  • Useful if you want to build production without minifying for debugging

• Optional minimizeSubappChunks?: boolean

  Code splitting should optimize to minimize the number of JS chunks are generated.

  Default: false

  • if not set, then we check env: MINIMIZE_SUBAPP_CHUNKS

• Optional optimizeCssOptions?: Record<any, unknown>

  Custom options for optimizing critical CSS

  • if not set, then we check env: OPTIMIZE_CSS_OPTIONS (which should be a JSON string)
  • TBD: define type for it

• Optional preserveSymlinks?: boolean

  https://webpack.js.org/configuration/resolve/#resolve-symlinks

  • Default: false
  • if not set, then we check env WEBPACK_PRESERVE_SYMLINKS, then NODE_PRESERVE_SYMLINKS

• Optional useAppWebpackConfig?: boolean

  Use this flag to control how we load your webpack.config.js|ts.

  When you create your own webpack.config.js|ts to customize webpack config, we start webpack with your config, which is responsible for loading xarc's internal config.

  If you want to turn off this behavior so we start with xarc's internal webpack config and then load yours, then set this to false.

  If you use .ts (typescript) for your config file, then we will try to load ts-node/register. You need to install ts-node package and have your tsconfig setup for your typescript.

• Optional v1RemoteSubApps?: RemoteSubAppOptions

  Specify Module Federation options to expose or consume remote V1 subapps through webpack5's ModuleFederationPlugin. See docs at https://webpack.js.org/concepts/module-federation/

  TODO: Exposing SubApps remotely has these limitations:

  1. publicPath must be "auto" to expose subapps remotely.
  2. Due to 1, cannot use CDN for assets.
  3. Cannot use "single" shared webpack runtimeChunk optimization.

  Remark

  this is only for subappV1

• Optional webpackDev?: boolean

  Enable webpack dev mode. Default: false

  • If not set, then will check env WEBPACK_DEV

• Optional woffFontInlineLimit?: number

  Size limit to prevent inlining woff fonts data

  • Default: 1000
  • if not set, then we check env WOFF_FONT_INLINE_LIMIT