MapStore 2 Webpack

When you develop with mapstore locally usually you run npm start, this script is defined in the package.json in the scripts section

"start": "webpack serve --progress --color --port 8081 --hot --inline --config build/webpack.config.js --content-base web/client"

With –config build/webpack.config.js we tell webpack which configuration to use and our webpack configuration uses an utility function present in this file build/buildConfig.js

We will discuss the main parts and for more details check out here for the full file

This file exports a function that can take as params either an array or an object, we recommend to use object

module.exports = ({
  bundles,
  themeEntries,
  paths,
  plugins = [],
  prod,
  publicPath,
  cssPrefix,
  prodPlugins = [],
  devPlugins = [],
  alias = {},
  proxy,
  // new optional only for single object argument
  projectConfig = {},
  devServer,
  resolveModules
}) => ({

@param {object} config.bundles object that defines the javascript (or jsx) entry points and related bundles

@param {object} config.themeEntries object that defines the css (or less) entry points and related bundles to be built (bundle name -> entry point path)

@param {boolean} config.prod flag for production / development mode (true = production)

@param {string} config.publicPath web public path for loading bundles (e.g. dist/)

@param {string} config.cssPrefix prefix to be appended on every generated css rule (e.g. ms2)

@param {array} config.prodPlugins plugins to be used only in production mode

@param {array} config.devPlugins plugins to be used only in development mode

@param {object} config.alias aliases to be used by webpack to resolve paths (alias -> real path)

@param {object} config.proxy webpack-devserver custom proxy configuration object

@param {object} config.projectConfig config mapped to __MAPSTORE_PROJECT_CONFIG__, available only with object syntax

@param {object} config.devServer webpack devserver configuration object, available only with object syntax

@param {object} config.resolveModules webpack resolve configuration object, available only with object syntax

Example of webpack.config for development env

module.exports = require('./buildConfig')(
  {
      [process.env.bundle || "mapstore2"]: path.join(__dirname, "..", "web", "client", "product", process.env.entrypoint || process.env.bundle || "app"),
      "embedded": path.join(__dirname, "..", "web", "client", "product", "embedded"),
      "dashboard-embedded": path.join(__dirname, "..", "web", "client", "product", "dashboardEmbedded"),
      "geostory-embedded": path.join(__dirname, "..", "web", "client", "product", "geostoryEmbedded")
  },
  { ["themes/default"]: themeEntries["themes/" + (process.env.theme || "default")]},
  {
      base: path.join(__dirname, ".."),
      dist: path.join(__dirname, "..", "web", "client", "dist"),
      framework: path.join(__dirname, "..", "web", "client"),
      code: path.join(__dirname, "..", "web", "client")
  },
  [extractThemesPlugin, moduleFederationPlugin],
  false,
  "dist/"
);