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": "npm run app:start",
"app:start": "concurrently -n frontend,backend -c green,blue \"npm:fe:start\" \"npm:be:start\"",

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
}) => ({

• config.bundles (object) object that defines the javascript (or jsx) entry points and related bundles

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

• config.prod (boolean) flag for production / development mode (true = production)

• config.publicPath (string) web public path for loading bundles (e.g. dist/)

• config.cssPrefix (string) prefix to be appended on every generated css rule (e.g. ms2)

• config.prodPlugins (array) plugins to be used only in production mode

• config.devPlugins (array) plugins to be used only in development mode

• config.alias (object) aliases to be used by webpack to resolve paths (alias -> real path)

• config.proxy (object) webpack-devserver custom proxy configuration object

• config.projectConfig (object) config mapped to __MAPSTORE_PROJECT_CONFIG__, available only with object syntax

• config.devServer (object) webpack devserver configuration object, available only with object syntax

• config.resolveModules (object) webpack resolve configuration object, available only with object syntax

Example of webpack.config.js for development env

const path = require("path");

const themeEntries = require('./themes.js').themeEntries;
const extractThemesPlugin = require('./themes.js').extractThemesPlugin;
const moduleFederationPlugin = require('./moduleFederation.js').plugin;
const config = require('./buildConfig')(
    {
        bundles: {
            ["mapstore2"]: path.join(__dirname, "..", "web", "client", "product", "app"),
            "embedded": path.join(__dirname, "..", "web", "client", "product", "embedded"),
            "ms2-api": path.join(__dirname, "..", "web", "client", "product", "api"),
            "dashboard-embedded": path.join(__dirname, "..", "web", "client", "product", "dashboardEmbedded"),
            "geostory-embedded": path.join(__dirname, "..", "web", "client", "product", "geostoryEmbedded")
        },
        themeEntries,
        paths: {
            base: path.join(__dirname, ".."),
            dist: path.join(__dirname, "..", "web", "client", "dist"),
            framework: path.join(__dirname, "..", "web", "client"),
            code: path.join(__dirname, "..", "web", "client")
        },
        plugins: [extractThemesPlugin, moduleFederationPlugin],
        prod: false
    }
);