Skip to content

ObsidianPluginWebpackPlugin

A webpack plugin that builds an Obsidian plugin.

What it does, each only when the consumer’s config has not said otherwise:

  • entry is src/main.ts, and mode follows the build mode. - The output is one CommonJS (commonjs2) main.js in dist/build (dist/dev in development), with no async chunks, so a dynamic import cannot become a sibling file. - target is node, which is what Obsidian’s renderer runs, so Node builtins resolve, while the export conditions are the browser’s (browser, webpack, the mode, module, import, require, and never node), so packages hand over their browser builds, as on mobile they must. - devtool is an inline source map in development only.

And always: Obsidian’s own modules (obsidian, electron, CodeMirror, Lezer) and the Node builtins are external beside the consumer’s own externals, the generated-file banner heads main.js, license comments a minimizer extracted into main.js.LICENSE.txt (which no Obsidian release ships) are put back into main.js, the output folder is emptied before the first build, every emitted CSS file ends up in styles.css, manifest.json (and in development .hotreload) is copied beside it, and a development build is deployed into the vault named by OBSIDIAN_CONFIG_FOLDER.

TypeScript stays the consumer’s choice of loader, as it would be without this plugin. The build features (ObsidianPluginFeatureOptions) are the plugin’s:

  • framework: 'react' | 'preact' needs nothing here: the TypeScript loader reads the automatic JSX runtime from the toolkit’s tsconfig preset, and webpack’s mode defines process.env.NODE_ENV. - framework: 'solid' | 'svelte' adds rules that compile the components with the toolkit’s shared transforms, and 'vue' applies unplugin-vue and defines Vue’s feature flags. - styles adds the one rule every stylesheet goes through (PostCSS and Tailwind, then css-loader, scoping *.module.css only with cssModules, then mini-css-extract-plugin), and applies mini-css-extract-plugin unless the config already does; leave your own .css rule out. styles: {} compiles plain CSS. - wasm imports a .wasm module as its bytes.

Import:

import { ObsidianPluginWebpackPlugin } from '@mnaoumov/obsidian-dev-toolkit/bundlers/webpack';

Signature:

export class ObsidianPluginWebpackPlugin implements WebpackPluginInstance

Implements: WebpackPluginInstance

Constructor

new ObsidianPluginWebpackPlugin(options?: ObsidianPluginWebpackPluginOptions)

Creates the plugin.

Methods

MethodReturnsDescription
apply(compiler)voidApplies the plugin to a webpack compiler.

Links to this page: