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

.. code-block:: javascript

  "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 <https://github.com/geosolutions-it/MapStore2/blob/master/build/webpack.config.js>`__ 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 <https://github.com/geosolutions-it/MapStore2/blob/master/build/buildConfig.js>`__ 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

.. code-block:: javascript

  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

.. code-block:: javascript

  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
      }
  );


.. toctree::
  :maxdepth: 2
  :caption: Contents: