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