Config

How to config

Create a mako.config.json file in the root directory of your project, and write the configuration in it.

e.g.

{
  "entry": {
    "index": "./src/index.js"
  }
}

Notice: When you’re using Mako with Umi, prefer to config the bundler in .umirc.ts or config/config.ts file.

Configuration items

analyze

Whether to analyze the build artifacts.

Notice: this configuration item is still WIP, the result may not be accurate.

autoCSSModules

Whether to automatically enable CSS Modules.

If not enabled, only files with .module.css or .module.less will be treated as CSS Modules; if enabled, named imports like import styles from './a.css' will also be treated as CSS Modules.

clean

Whether to clean the output directory before building.

cjs

Whether to output cjs format code.

codeSplitting

Specify the code splitting strategy. Use auto or granular strategy for SPA, and advance strategy for MPA.

// auto strategy
{
  codeSplitting: {
    strategy: "auto";
  }
}

// granular strategy
{
  codeSplitting:  {
    strategy: "granular",
    options: {
      // Node modules those will be split to framework chunk
      frameworkPackages: [ "react", "antd" ],
      // (optional) The minimum size of the node module to be split
      libMinSize: 160000
    }
  }
}


// advance strategy
{
  codeSplitting: {
    strategy: "advanced",
    options: {
      //（optional）The minimum size of the split chunk, async chunks smaller than this size will be merged into the entry chunk
      minSize: 20000,
      // Split chunk grouping configuration
      groups: [
        {
          // The name of the chunk group, currently only string values are supported
          name: "common",
          //（optional）The chunk type that the chunk group contains modules belong to, enum values are "async" (default) | "entry" | "all"
          allowChunks: "entry",
          //（optional）The minimum number of references to modules contained in the chunk group
          minChunks: 1,
          //（optional）The minimum size of the chunk group to take effect
          minSize: 20000,
          //（optional）The maximum size of the chunk group, exceeding this size will be automatically split again
          maxSize: 5000000,
          //（optional）The matching priority of the chunk group, the larger the value, the higher the priority
          priority: 0,
          //（optional）The matching regular expression of the chunk group
          test: "(?:)",
        }
      ],
    },
  }
}

copy

Specify the files or directories to be copied. By default, the files under the public directory will be copied to the output directory.

cssModulesExportOnlyLocales

Whether to export only the class names of CSS Modules, not the values of CSS Modules. Usually used in server-side rendering scenarios, because when server-side rendering, you don’t need the values of CSS Modules, only the class names are needed.

define

Specify the variables that need to be replaced in the code.

e.g.

{
  define: {
    "FOO": "foo",
  },
}

Notice: Currently, define will automatically handle the process.env prefix.

devServer

Specify the devServer configuration.

devtool

Specify the source map type.

duplicatePackageChecker

Configuration for duplicate package checker.

Child configuration items:

Example:

{
  "duplicatePackageChecker": {
    "verbose": true,
    "showHelp": true,
    "emitError": false
  }
}

dynamicImportToRequire

Whether to convert dynamic import to require. Useful when using node platform, or when you want just a single js output file.

e.g.

import("./a.js");
// => require("./a.js")

emitAssets

Whether to output assets files. Usually set to false when building a pure server-side rendering project, because assets files are not needed at this time.

emitDecoratorMetadata

Whether to emit decorator metadata.

emotion

Whether to enable emotion support.

entry

Specify the entry file.

e.g.

{
  entry: {
    index: "./src/index.js",
    login: "./src/login.js",
  },
}

experimental.detectLoop

Experimental configuration for generating dependence loop info. false to disable the feature.

Options:

e.g.

{
  "experimental": {
    "ignoreNodeModules": false,
    "graphviz": true
  }
}

experimental.requireContext

Experimental configuration, to enable or disable the require.context feature.

e.g.

{
  "experimental": {
    "requireContext": false
  }
}

experimental.webpackSyntaxValidate

Experimental configuration, specify the packages that are allowed to use webpack syntax.

e.g.

{
  experimental: {
    webpackSyntaxValidate: ["foo", "bar"],
  },
}

experimental.magicComment

Experimental configuration, whether to support magic comments like webpack.

e.g.

{
  experimental: {
    magicComment: true,
  },
}

the magic comment is like below:

import(/* makoChunkName: 'myChunk' */ "./lazy");
import(/* webpackChunkName: 'myChunk' */ "./lazy");
new Worker(/* makoChunkName: 'myWorker' */ new URL("./worker", import.meta.url));
new Worker(/* webpackChunkName: 'myWorker' */ new URL("./worker", import.meta.url));
import(/* makoIgnore: true */ "./foo");
import(/* webpackIgnore: true */ "./foo");

externals

Specify the configuration of external dependencies.

e.g.

{
  externals: {
    react: "React",
    "react-dom": "ReactDOM",
  },
}

Then, when the code encounters import React from "react", it will be replaced with const React = (typeof globalThis !== 'undefined' ? globalThis : self).React.

If you want to output the external dependencies with require, you can set it as follows.

{
  externals: {
    foo: "commonjs foo",
  },
}

Then, when the code encounters import foo from "foo", it will be replaced with const foo = require("foo").

flexBugs

Whether to fix flexBugs.

forkTsChecker

Whether to run TypeScript type checker on a separate process.

hash

Whether to generate hash file names.

hmr

Whether to enable hot update.

ignoreCSSParserErrors

Whether to ignore CSS parsing errors.

ignores

Specifies the files to be ignored. Ignored files will output empty modules.

e.g.

{
  "ignores": [
    "^assert$",
    "xxxx.provider.js$",
    "^(node:)?({})(/|$)"
  ]
}

inlineCSS

Whether to output CSS inlined into JS.

Notice: This configuration can only be used with umd, because injecting CSS is not a recommended way and may have potential performance issues.

inlineLimit

Specify the size limit of the assets file that needs to be converted to base64 format.

inlineExcludesExtensions

Excludes assets file extension list that don’t need to be converted to base64 format.

e.g.

{
  "inlineExcludesExtensions": ["webp"]
}

less

Specify the less configuration.

e.g.

{
  modifyVars: {
    'primary-color': '#1DA57A',
    'link-color': '#1DA57A',
  },
  globalVars: {
    'primary-color': '#ffff00',
    hack: 'true; @import "your-global-less-file.less";',
  },
  sourceMap: {
    sourceMapFileInline: true,
    outputSourceFiles: true,
  },
  math: 'always',
  plugins: [
    [require.resolve("less-plugin-clean-css"), { roundingPrecision: 1 }]
  ],
}

manifest

Whether to generate the manifest.json file. When enabled, the default value of fileName is asset-manifest.json.

mdx

Whether to enable mdx support.

minify

Whether to minify the code.

mode

Specify the build mode, "development" or "production".

moduleIdStrategy

Specify the strategy for generating moduleId.

nodePolyfill

Whether to enable node polyfill.

output

Output related configuration.

optimization

Specify the configuration to optimize the build artifacts. Currently, the following sub-configuration items are supported.

platform

Specify the platform to build, "browser" or "node".

Notice: When using "node", you also need to set dynamicImportToRequire to true, because the runtime does not yet support node-style chunk loading.

plugins

Specify the plugins to use.

// JSHooks
{
  name?: string;
  enforce?: "pre" | "post";
  buildStart?: () => void;
  buildEnd?: () => void;
  generateEnd?: (data: {
    isFirstCompile: boolean;
    time: number;
    stats: {
      startTime: number;
      endTime: number;
      ...
    };
  }) => void;
  writeBundle?: () => void;
  watchChanges?: (id: string, params: { event: "create" | "delete" | "update" }) => void;
  load?: (filePath: string) => Promise<{ content: string, type: 'css'|'js'|'jsx'|'ts'|'tsx' }>;
  loadInclude?: (filePath: string) => boolean;
  resolveId?: (id: string, importer: string, { isEntry: bool }) => Promise<{ id: string, external: bool }>;
  transform?: (content: string, id: string) => Promise<{ content: string, type: 'css'|'js'|'jsx'|'ts'|'tsx' }>;
  transformInclude?: (filePath: string) => Promise<boolean> | boolean;
}

JSHooks is a set of hook functions used to extend the compilation process of Mako.

progress

Whether to display the build progress bar.

providers

Specify the provider configuration, used to replace identifiers in the code with require module identifiers.

e.g.

{
  providers: {
    process: ["process", ""],
    Buffer: ["buffer", "Buffer"],
  },
}

These configurations will replace the identifiers process and Buffer with the code that require the corresponding module when encountered.

process;
// => require("process")
Buffer;
// => require("buffer").Buffer

publicPath

publicPath configuration. Note: There is a special value "runtime", which means that it will switch to runtime mode and use the runtime window.publicPath as publicPath.

If you want to set the publicPath in the runtime, use __mako_public_path__. (Notice: __webpack_public_path__ is also supported)

__mako_public_path__ = '/foo/';

px2rem

Whether to enable px2rem conversion.

Among them, selectorBlackList, selectorWhiteList and selectorDoubleList all support passing regular expressions or strings, such as

"selectorBlackList": [".a", "/.__CustomClass_/"]

The string wrapped by the characters / will be parsed as a regular expression.

react

react related configuration.

e.g.

function App() {
  return <div>1</div>;
}

When runtime is automatic, the output is as follows,

import { jsx as _jsx } from "react/jsx-runtime";
function App() {
  return /*#__PURE__*/ _jsx("div", {
    children: "1",
  });
}

When runtime is classic, the output is as follows,

function App() {
  return /*#__PURE__*/ React.createElement("div", null, "1");
}

resolve

resolve configuration.

e.g.

{
  resolve: {
    alias: [
      ["@", "./src"]
    ],
    extensions: ["js", "jsx", "ts", "tsx"],
  },
}

Notice 1: If you want to alias a directory, please don’t add the /* affix, we don’t support it yet.

e.g.

{
  resolve: {
    alias: [
-      ["@/src/*", "./src/*"],
+      [ "@/src", "./src"],
    ],
  },
}

Notice 2: If you want to alias to a local path, make sure to add the ./ prefix. Otherwise, it will be treated as a dependency module.

{
  resolve: {
    alias: [
-       ["@/src", "src"],
+       ["@/src", "./src"],
    ],
  },
}

rscClient

Configuration related to RSC client.

rscServer

Configuration related to RSC server.

Child configuration items:

sass

The “sass” package is not installed. Please run “npm install sass” to install it.

Specify the sass configuration.

e.g.

{
  "sourceMap": false
}

stats

Whether to generate stats.json file.

Child configuration items:

transformImport

Simplified version of babel-plugin-import, only supports three configuration items: libraryName, libraryDirectory, and style, used to meet the needs of on-demand loading of antd v4 styles in stock projects.

e.g.

{
  transformImport: {
    libraryName: "antd",
    libraryDirectory: "es",
    style: true,
  },
}

umd

Whether to output umd format.

useDefineForClassFields

Whether to use defineProperty to define class fields.

watch

Watch related configuration.

e.g. If you want to ignore the foo directory under root directory, you can set it as follows.

{
  watch: {
    ignorePaths: ["foo"],
  },
}

writeToDisk

Whether to write the build result to disk when mode is development.

Edit this page on GitHub