Skip to main content
When target is set to web, MorJS uses @morjs/plugin-compiler-web to produce a standard HTML + JS + CSS web application from your mini-program source. All web-specific options live under the web key in your config.
mor.config.ts
import { defineConfig } from '@morjs/cli'

export default defineConfig({
  name: 'web',
  sourceType: 'wechat',
  target: 'web',
  compileMode: 'bundle',

  web: {
    needRpx: true,
    styleScope: true,
    publicPath: '/'
  }
})
All fields in this section are nested under the web key. They have no effect when compiling to mini-program targets.

​
How web compilation works

MorJS transforms mini-program templates (WXML/AXML), scripts, and styles into web-compatible output:
  • Templates — Converted from WXML/AXML into web component markup using @morjs/runtime-web.
  • Styles — rpx units are converted to rem by default, enabling responsive scaling.
  • Scripts — Mini-program lifecycle APIs are shimmed via the web runtime’s API layer.
  • Routing — Page routing is handled by the web runtime’s router module.
  • Assets — Files up to 8 KB are inlined as base64 data URIs; larger files are emitted separately.

​
Output

The default output directory for web builds is dist/web. In production bundle mode, output filenames include a content hash: 
dist/web/pages/index.[contenthash:6].js
dist/web/pages/index.[contenthash:6].css
In development mode, filenames have no hash: 
dist/web/pages/index.js
dist/web/pages/index.css

​
Options reference

​
Layout and routing

​
web.showHeader
boolean | string[] | function
default:"true"
Whether to show the navigation header bar on pages.
  • true — Show on all pages.
  • false — Hide on all pages.
  • string[] — Show only on the listed page paths.
  • (pagePath: string) => boolean — Custom function for per-page control.
​
web.showBack
boolean | string[] | function
default:"false"
Whether to show a back button in the navigation header.
  • true — Show on all pages.
  • false — Hide on all pages.
  • string[] — Show only on the listed page paths.
  • (pagePath: string) => boolean — Custom function for per-page control.

​
RPX unit conversion

​
web.needRpx
boolean
Enable rpx to rem conversion. When enabled, MorJS transforms rpx units in style files into rem values based on rpxRootValue. Pair this with the runtime setRootFontSizeForRem method for responsive scaling.
​
web.rpxRootValue
number
default:"32"
The root rem value used for rpx conversion. 1rpx equals 1/rpxRootValue rem.
​
web.usePx
object
Convert rpx to px instead of rem. Useful for fixed-layout scenarios.
usePx: {
  ratio: 1  // 1rpx = 1/ratio px
}
When ratio is 1, 1rpx = 1px. When ratio is 2, 1rpx = 0.5px.
​
web.responsiveRootFontSize
number
Automatically set the root font size for responsive layouts. The base screen width is 375px.

​
Style isolation

​
web.styleScope
boolean
Add a unique hash suffix to all CSS class names to prevent style collisions between pages. Recommended for multi-page applications.

​
Assets

​
web.inlineAssetLimit
number
default:"8192"
Maximum file size in bytes for assets to be inlined as base64 data URIs. Files larger than this value are emitted as separate files. Default is 8192 (8 KB).
​
web.publicPath
string
default:"/"
The base URL for all output asset references. Set this to match your deployment path, for example /my-app/ for a subpath deployment.

​
Entries

​
web.autoGenerateEntries
boolean
default:"true"
Automatically generate webpack entry files from your mini-program page and component structure. Disable this only if you need to manage webpack entries manually.
​
web.entry
any
Custom webpack entry configuration. Only used when autoGenerateEntries is false. You are responsible for assembling page imports and runtime initialization.
​
web.emitIntermediateAssets
boolean
default:"false"
Output intermediate compilation artifacts (pre-processed templates, scripts, and styles) alongside the final output. Useful for debugging the compilation pipeline.

​
Components

​
web.globalComponentsConfig
Record<string, string>
Override the default component name mapping for web output. Keys are mini-program component names; values are their web equivalents.
globalComponentsConfig: {
  'van-button': 'my-web-button'
}

​
Extensions

​
web.extensions
Array<string | [string, object]>
API and component extension modules to load in the web runtime. Extensions customize or augment the web runtime’s behavior.
extensions: [
  '@my-org/web-extension',
  ['@my-org/another-extension', { option: true }]
]

​
HTML output

​
web.htmlOptions
object | object[]
Configuration for html-webpack-plugin. Pass a single object for one HTML file, or an array of objects to generate multiple HTML entry pages.
htmlOptions: {
  title: 'My App',
  template: './public/index.html',
  filename: 'index.html'
}
​
web.miniCssExtractOptions
object
Configuration for mini-css-extract-plugin. Controls how CSS is extracted into separate files.

​
Dev server

​
web.devServer
object
Configuration for the webpack dev server. Accepts all webpack DevServer options.
devServer: {
  port: 8080,
  hot: true,
  proxy: {
    '/api': 'http://localhost:3000'
  }
}

​
App runtime config

​
web.appConfig
object
default:"{}"
Runtime configuration injected into window.$MOR_APP_CONFIG. Consumed by the web runtime to customize behavior.

​
Minimal web config example

mor.config.ts
import { defineConfig } from '@morjs/cli'

export default defineConfig({
  name: 'web',
  sourceType: 'wechat',
  target: 'web',
  compileMode: 'bundle',
  mode: 'production',

  web: {
    needRpx: true,
    styleScope: true,
    publicPath: '/',
    htmlOptions: {
      title: 'My Mini-Program on Web',
      template: './public/index.html'
    },
    devServer: {
      port: 8080,
      hot: true
    }
  }
})

Compiler options →

All compiler-level options that also apply to web builds, including aliases, defines, and TypeScript settings.

Build docs developers (and LLMs) love

Get started for freeTalk to us