From 4743b0b5ceac4c3ff7b8dc100df18418f3085c0c Mon Sep 17 00:00:00 2001
From: Laurent Cozic <laurent@cozic.net>
Date: Wed, 13 Jan 2021 12:17:54 +0000
Subject: [PATCH] Plugins: Updated types

---
 .../codemirror_content_script/.npmignore      |  5 --
 .../api/JoplinContentScripts.d.ts             | 10 ++-
 .../codemirror_content_script/api/types.ts    |  4 +-
 .../codemirror_content_script/package.json    |  5 +-
 .../webpack.config.js                         | 72 ++++++++++++++-----
 .../support/plugins/content_script/.gitignore |  4 --
 .../support/plugins/content_script/.npmignore |  4 --
 .../api/JoplinContentScripts.d.ts             | 10 ++-
 .../plugins/content_script/api/types.ts       |  4 +-
 .../plugins/content_script/package.json       |  5 +-
 .../plugins/content_script/webpack.config.js  | 72 ++++++++++++++-----
 .../tests/support/plugins/dialog/.gitignore   |  4 --
 .../tests/support/plugins/dialog/.npmignore   |  4 --
 .../dialog/api/JoplinContentScripts.d.ts      | 10 ++-
 .../tests/support/plugins/dialog/api/types.ts |  4 +-
 .../tests/support/plugins/dialog/package.json |  5 +-
 .../support/plugins/dialog/webpack.config.js  | 72 ++++++++++++++-----
 .../plugins/editor_context_menu/.gitignore    |  4 --
 .../plugins/editor_context_menu/.npmignore    |  4 --
 .../api/JoplinContentScripts.d.ts             | 10 ++-
 .../plugins/editor_context_menu/api/types.ts  |  4 +-
 .../plugins/editor_context_menu/package.json  |  5 +-
 .../editor_context_menu/webpack.config.js     | 72 ++++++++++++++-----
 .../tests/support/plugins/events/.gitignore   |  4 --
 .../tests/support/plugins/events/.npmignore   |  4 --
 .../events/api/JoplinContentScripts.d.ts      | 10 ++-
 .../tests/support/plugins/events/api/types.ts |  4 +-
 .../tests/support/plugins/events/package.json |  5 +-
 .../support/plugins/events/webpack.config.js  | 72 ++++++++++++++-----
 .../tests/support/plugins/jpl_test/.gitignore |  4 --
 .../tests/support/plugins/jpl_test/.npmignore |  4 --
 .../jpl_test/api/JoplinContentScripts.d.ts    | 10 ++-
 .../support/plugins/jpl_test/api/types.ts     |  4 +-
 .../support/plugins/jpl_test/package.json     |  5 +-
 .../plugins/jpl_test/webpack.config.js        | 72 ++++++++++++++-----
 .../support/plugins/json_export/.gitignore    |  4 --
 .../support/plugins/json_export/.npmignore    |  4 --
 .../json_export/api/JoplinContentScripts.d.ts | 10 ++-
 .../support/plugins/json_export/api/types.ts  |  4 +-
 .../support/plugins/json_export/package.json  |  5 +-
 .../plugins/json_export/webpack.config.js     | 72 ++++++++++++++-----
 .../tests/support/plugins/menu/.gitignore     |  4 --
 .../tests/support/plugins/menu/.npmignore     |  4 --
 .../menu/api/JoplinContentScripts.d.ts        | 10 ++-
 .../tests/support/plugins/menu/api/types.ts   |  4 +-
 .../tests/support/plugins/menu/package.json   |  5 +-
 .../support/plugins/menu/webpack.config.js    | 72 ++++++++++++++-----
 .../plugins/multi_selection/.gitignore        |  4 --
 .../plugins/multi_selection/.npmignore        |  4 --
 .../api/JoplinContentScripts.d.ts             | 10 ++-
 .../plugins/multi_selection/api/types.ts      |  4 +-
 .../plugins/multi_selection/package.json      |  5 +-
 .../plugins/multi_selection/webpack.config.js | 72 ++++++++++++++-----
 .../support/plugins/post_messages/.gitignore  |  3 -
 .../support/plugins/post_messages/.npmignore  |  3 -
 .../api/JoplinContentScripts.d.ts             | 10 ++-
 .../plugins/post_messages/api/types.ts        |  4 +-
 .../plugins/post_messages/package.json        |  5 +-
 .../plugins/post_messages/webpack.config.js   | 72 ++++++++++++++-----
 .../plugins/register_command/.gitignore       |  4 --
 .../plugins/register_command/.npmignore       |  4 --
 .../api/JoplinContentScripts.d.ts             | 10 ++-
 .../plugins/register_command/api/types.ts     |  4 +-
 .../plugins/register_command/package.json     |  5 +-
 .../register_command/webpack.config.js        | 72 ++++++++++++++-----
 .../support/plugins/selected_text/.gitignore  |  4 --
 .../support/plugins/selected_text/.npmignore  |  4 --
 .../api/JoplinContentScripts.d.ts             | 10 ++-
 .../plugins/selected_text/api/types.ts        |  4 +-
 .../plugins/selected_text/package.json        |  5 +-
 .../plugins/selected_text/webpack.config.js   | 72 ++++++++++++++-----
 .../tests/support/plugins/settings/.gitignore |  4 --
 .../tests/support/plugins/settings/.npmignore |  4 --
 .../settings/api/JoplinContentScripts.d.ts    | 10 ++-
 .../support/plugins/settings/api/types.ts     |  4 +-
 .../support/plugins/settings/package.json     |  5 +-
 .../plugins/settings/webpack.config.js        | 72 ++++++++++++++-----
 .../tests/support/plugins/toc/.gitignore      |  4 --
 .../tests/support/plugins/toc/.npmignore      |  4 --
 .../plugins/toc/api/JoplinContentScripts.d.ts | 10 ++-
 .../tests/support/plugins/toc/api/types.ts    |  4 +-
 .../tests/support/plugins/toc/package.json    |  7 +-
 .../support/plugins/toc/webpack.config.js     | 72 ++++++++++++++-----
 .../plugins/withExternalModules/.gitignore    |  4 --
 .../plugins/withExternalModules/.npmignore    |  4 --
 .../api/JoplinContentScripts.d.ts             | 10 ++-
 .../plugins/withExternalModules/api/types.ts  |  4 +-
 .../plugins/withExternalModules/package.json  |  5 +-
 .../withExternalModules/webpack.config.js     | 72 ++++++++++++++-----
 .../templates/api/JoplinContentScripts.d.ts   | 10 ++-
 .../generators/app/templates/api/types.ts     |  4 +-
 91 files changed, 1062 insertions(+), 434 deletions(-)

diff --git a/packages/app-cli/tests/support/plugins/codemirror_content_script/.npmignore b/packages/app-cli/tests/support/plugins/codemirror_content_script/.npmignore
index 8df5d12d40..80f70d77e9 100644
--- a/packages/app-cli/tests/support/plugins/codemirror_content_script/.npmignore
+++ b/packages/app-cli/tests/support/plugins/codemirror_content_script/.npmignore
@@ -6,8 +6,3 @@
 /dist
 tsconfig.json
 webpack.config.js
-
-
-
-
-
diff --git a/packages/app-cli/tests/support/plugins/codemirror_content_script/api/JoplinContentScripts.d.ts b/packages/app-cli/tests/support/plugins/codemirror_content_script/api/JoplinContentScripts.d.ts
index 09ad5178a4..145e9d145a 100644
--- a/packages/app-cli/tests/support/plugins/codemirror_content_script/api/JoplinContentScripts.d.ts
+++ b/packages/app-cli/tests/support/plugins/codemirror_content_script/api/JoplinContentScripts.d.ts
@@ -23,10 +23,18 @@ export default class JoplinContentScripts {
      * * [View the renderer demo plugin](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/content_script)
      * * [View the editor demo plugin](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/codemirror_content_script)
      *
+     * See also the [postMessage demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages)
+     *
      * @param type Defines how the script will be used. See the type definition for more information about each supported type.
      * @param id A unique ID for the content script.
      * @param scriptPath Must be a path relative to the plugin main script. For example, if your file content_script.js is next to your index.ts file, you would set `scriptPath` to `"./content_script.js`.
      */
     register(type: ContentScriptType, id: string, scriptPath: string): Promise<void>;
-    onMessage(id: string, callback: any): Promise<void>;
+    /**
+     * Listens to a messages sent from the content script using postMessage().
+     * See {@link ContentScriptType} for more information as well as the
+     * [postMessage
+     * demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages)
+     */
+    onMessage(contentScriptId: string, callback: any): Promise<void>;
 }
diff --git a/packages/app-cli/tests/support/plugins/codemirror_content_script/api/types.ts b/packages/app-cli/tests/support/plugins/codemirror_content_script/api/types.ts
index bc3219ac27..c8110fb650 100644
--- a/packages/app-cli/tests/support/plugins/codemirror_content_script/api/types.ts
+++ b/packages/app-cli/tests/support/plugins/codemirror_content_script/api/types.ts
@@ -458,7 +458,7 @@ export enum ContentScriptType {
 	 * });
 	 * ```
 	 *
-	 * See {@link JoplinContentScript.onMessage} for more details, as well as
+	 * See {@link JoplinContentScripts.onMessage} for more details, as well as
 	 * the [postMessage
 	 * demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages).
 	 *
@@ -557,7 +557,7 @@ export enum ContentScriptType {
 	 * });
 	 * ```
 	 *
-	 * See {@link JoplinContentScript.onMessage} for more details, as well as
+	 * See {@link JoplinContentScripts.onMessage} for more details, as well as
 	 * the [postMessage
 	 * demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages).
 	 *
diff --git a/packages/app-cli/tests/support/plugins/codemirror_content_script/package.json b/packages/app-cli/tests/support/plugins/codemirror_content_script/package.json
index 00ab0179db..ec3e6c1842 100644
--- a/packages/app-cli/tests/support/plugins/codemirror_content_script/package.json
+++ b/packages/app-cli/tests/support/plugins/codemirror_content_script/package.json
@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "description": "",
   "scripts": {
-    "dist": "webpack",
+    "dist": "webpack --joplin-plugin-config buildMain && webpack --joplin-plugin-config buildExtraScripts && webpack --joplin-plugin-config createArchive",
     "prepare": "npm run dist",
     "update": "npm install -g generator-joplin && yo joplin --update"
   },
@@ -22,6 +22,7 @@
     "typescript": "^3.9.3",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11",
-    "chalk": "^4.1.0"
+    "chalk": "^4.1.0",
+    "yargs": "^16.2.0"
   }
 }
\ No newline at end of file
diff --git a/packages/app-cli/tests/support/plugins/codemirror_content_script/webpack.config.js b/packages/app-cli/tests/support/plugins/codemirror_content_script/webpack.config.js
index 35538a5298..ec6c21ff26 100644
--- a/packages/app-cli/tests/support/plugins/codemirror_content_script/webpack.config.js
+++ b/packages/app-cli/tests/support/plugins/codemirror_content_script/webpack.config.js
@@ -33,10 +33,6 @@ const manifest = readManifest(manifestPath);
 const pluginArchiveFilePath = path.resolve(publishDir, `${manifest.id}.jpl`);
 const pluginInfoFilePath = path.resolve(publishDir, `${manifest.id}.json`);
 
-fs.removeSync(distDir);
-fs.removeSync(publishDir);
-fs.mkdirpSync(publishDir);
-
 function validatePackageJson() {
 	const content = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
 	if (!content.name || content.name.indexOf('joplin-plugin-') !== 0) {
@@ -109,6 +105,7 @@ function createPluginInfo(manifestPath, destPath, jplFilePath) {
 
 function onBuildCompleted() {
 	try {
+		fs.removeSync(path.resolve(publishDir, 'index.js'));
 		createPluginArchive(distDir, pluginArchiveFilePath);
 		createPluginInfo(manifestPath, pluginInfoFilePath, pluginArchiveFilePath);
 		validatePackageJson();
@@ -174,6 +171,16 @@ const extraScriptConfig = Object.assign({}, baseConfig, {
 	},
 });
 
+const createArchiveConfig = {
+	stats: 'errors-only',
+	entry: './dist/index.js',
+	output: {
+		filename: 'index.js',
+		path: publishDir,
+	},
+	plugins: [new WebpackOnBuildPlugin(onBuildCompleted)],
+};
+
 function resolveExtraScriptPath(name) {
 	const relativePath = `./src/${name}`;
 
@@ -196,8 +203,8 @@ function resolveExtraScriptPath(name) {
 	};
 }
 
-function addExtraScriptConfigs(baseConfig, userConfig) {
-	if (!userConfig.extraScripts.length) return baseConfig;
+function buildExtraScriptConfigs(userConfig) {
+	if (!userConfig.extraScripts.length) return [];
 
 	const output = [];
 
@@ -209,22 +216,55 @@ function addExtraScriptConfigs(baseConfig, userConfig) {
 		}));
 	}
 
-	return baseConfig.concat(output);
+	return output;
 }
 
-function addLastConfigStep(config) {
-	const lastConfig = config[config.length - 1];
-	if (!lastConfig.plugins) lastConfig.plugins = [];
-	lastConfig.plugins.push(new WebpackOnBuildPlugin(onBuildCompleted));
-	config[config.length - 1] = lastConfig;
-	return config;
+function main(processArgv) {
+	const yargs = require('yargs/yargs');
+	const argv = yargs(processArgv).argv;
+
+	const configName = argv['joplin-plugin-config'];
+	if (!configName) throw new Error('A config file must be specified via the --joplin-plugin-config flag');
+
+	// Webpack configurations run in parallel, while we need them to run in
+	// sequence, and to do that it seems the only way is to run webpack multiple
+	// times, with different config each time.
+
+	const configs = {
+		// Builds the main src/index.ts and copy the extra content from /src to
+		// /dist including scripts, CSS and any other asset.
+		buildMain: pluginConfig,
+
+		// Builds the extra scripts as defined in plugin.config.json. When doing
+		// so, some JavaScript files that were copied in the previous might be
+		// overwritten here by the compiled version. This is by design. The
+		// result is that JS files that don't need compilation, are simply
+		// copied to /dist, while those that do need it are correctly compiled.
+		buildExtraScripts: buildExtraScriptConfigs(userConfig),
+
+		// Ths config is for creating the .jpl, which is done via the plugin, so
+		// it doesn't actually need an entry and output, however webpack won't
+		// run without this. So we give it an entry that we know is going to
+		// exist and output in the publish dir. Then the plugin will delete this
+		// temporary file before packaging the plugin.
+		createArchive: createArchiveConfig,
+	};
+
+	// If we are running the first config step, we clean up and create the build
+	// directories.
+	if (configName === 'buildMain') {
+		fs.removeSync(distDir);
+		fs.removeSync(publishDir);
+		fs.mkdirpSync(publishDir);
+	}
+
+	return configs[configName];
 }
 
-let exportedConfigs = [pluginConfig];
+let exportedConfigs = [];
 
 try {
-	exportedConfigs = addExtraScriptConfigs(exportedConfigs, userConfig);
-	exportedConfigs = addLastConfigStep(exportedConfigs);
+	exportedConfigs = main(process.argv);
 } catch (error) {
 	console.error(chalk.red(error.message));
 	process.exit(1);
diff --git a/packages/app-cli/tests/support/plugins/content_script/.gitignore b/packages/app-cli/tests/support/plugins/content_script/.gitignore
index 7a4fea3fe7..622f443408 100644
--- a/packages/app-cli/tests/support/plugins/content_script/.gitignore
+++ b/packages/app-cli/tests/support/plugins/content_script/.gitignore
@@ -1,7 +1,3 @@
 dist/
 node_modules/
 publish/
-
-
-
-
diff --git a/packages/app-cli/tests/support/plugins/content_script/.npmignore b/packages/app-cli/tests/support/plugins/content_script/.npmignore
index 3f18d39bd0..80f70d77e9 100644
--- a/packages/app-cli/tests/support/plugins/content_script/.npmignore
+++ b/packages/app-cli/tests/support/plugins/content_script/.npmignore
@@ -6,7 +6,3 @@
 /dist
 tsconfig.json
 webpack.config.js
-
-
-
-
diff --git a/packages/app-cli/tests/support/plugins/content_script/api/JoplinContentScripts.d.ts b/packages/app-cli/tests/support/plugins/content_script/api/JoplinContentScripts.d.ts
index 09ad5178a4..145e9d145a 100644
--- a/packages/app-cli/tests/support/plugins/content_script/api/JoplinContentScripts.d.ts
+++ b/packages/app-cli/tests/support/plugins/content_script/api/JoplinContentScripts.d.ts
@@ -23,10 +23,18 @@ export default class JoplinContentScripts {
      * * [View the renderer demo plugin](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/content_script)
      * * [View the editor demo plugin](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/codemirror_content_script)
      *
+     * See also the [postMessage demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages)
+     *
      * @param type Defines how the script will be used. See the type definition for more information about each supported type.
      * @param id A unique ID for the content script.
      * @param scriptPath Must be a path relative to the plugin main script. For example, if your file content_script.js is next to your index.ts file, you would set `scriptPath` to `"./content_script.js`.
      */
     register(type: ContentScriptType, id: string, scriptPath: string): Promise<void>;
-    onMessage(id: string, callback: any): Promise<void>;
+    /**
+     * Listens to a messages sent from the content script using postMessage().
+     * See {@link ContentScriptType} for more information as well as the
+     * [postMessage
+     * demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages)
+     */
+    onMessage(contentScriptId: string, callback: any): Promise<void>;
 }
diff --git a/packages/app-cli/tests/support/plugins/content_script/api/types.ts b/packages/app-cli/tests/support/plugins/content_script/api/types.ts
index bc3219ac27..c8110fb650 100644
--- a/packages/app-cli/tests/support/plugins/content_script/api/types.ts
+++ b/packages/app-cli/tests/support/plugins/content_script/api/types.ts
@@ -458,7 +458,7 @@ export enum ContentScriptType {
 	 * });
 	 * ```
 	 *
-	 * See {@link JoplinContentScript.onMessage} for more details, as well as
+	 * See {@link JoplinContentScripts.onMessage} for more details, as well as
 	 * the [postMessage
 	 * demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages).
 	 *
@@ -557,7 +557,7 @@ export enum ContentScriptType {
 	 * });
 	 * ```
 	 *
-	 * See {@link JoplinContentScript.onMessage} for more details, as well as
+	 * See {@link JoplinContentScripts.onMessage} for more details, as well as
 	 * the [postMessage
 	 * demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages).
 	 *
diff --git a/packages/app-cli/tests/support/plugins/content_script/package.json b/packages/app-cli/tests/support/plugins/content_script/package.json
index 3c86edffd7..f226e7a0f1 100644
--- a/packages/app-cli/tests/support/plugins/content_script/package.json
+++ b/packages/app-cli/tests/support/plugins/content_script/package.json
@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "description": "",
   "scripts": {
-    "dist": "webpack",
+    "dist": "webpack --joplin-plugin-config buildMain && webpack --joplin-plugin-config buildExtraScripts && webpack --joplin-plugin-config createArchive",
     "prepare": "npm run dist",
     "update": "npm install -g generator-joplin && yo joplin --update"
   },
@@ -22,7 +22,8 @@
     "typescript": "^3.9.3",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11",
-    "chalk": "^4.1.0"
+    "chalk": "^4.1.0",
+    "yargs": "^16.2.0"
   },
   "dependencies": {
     "left-pad": "^1.3.0"
diff --git a/packages/app-cli/tests/support/plugins/content_script/webpack.config.js b/packages/app-cli/tests/support/plugins/content_script/webpack.config.js
index 35538a5298..ec6c21ff26 100644
--- a/packages/app-cli/tests/support/plugins/content_script/webpack.config.js
+++ b/packages/app-cli/tests/support/plugins/content_script/webpack.config.js
@@ -33,10 +33,6 @@ const manifest = readManifest(manifestPath);
 const pluginArchiveFilePath = path.resolve(publishDir, `${manifest.id}.jpl`);
 const pluginInfoFilePath = path.resolve(publishDir, `${manifest.id}.json`);
 
-fs.removeSync(distDir);
-fs.removeSync(publishDir);
-fs.mkdirpSync(publishDir);
-
 function validatePackageJson() {
 	const content = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
 	if (!content.name || content.name.indexOf('joplin-plugin-') !== 0) {
@@ -109,6 +105,7 @@ function createPluginInfo(manifestPath, destPath, jplFilePath) {
 
 function onBuildCompleted() {
 	try {
+		fs.removeSync(path.resolve(publishDir, 'index.js'));
 		createPluginArchive(distDir, pluginArchiveFilePath);
 		createPluginInfo(manifestPath, pluginInfoFilePath, pluginArchiveFilePath);
 		validatePackageJson();
@@ -174,6 +171,16 @@ const extraScriptConfig = Object.assign({}, baseConfig, {
 	},
 });
 
+const createArchiveConfig = {
+	stats: 'errors-only',
+	entry: './dist/index.js',
+	output: {
+		filename: 'index.js',
+		path: publishDir,
+	},
+	plugins: [new WebpackOnBuildPlugin(onBuildCompleted)],
+};
+
 function resolveExtraScriptPath(name) {
 	const relativePath = `./src/${name}`;
 
@@ -196,8 +203,8 @@ function resolveExtraScriptPath(name) {
 	};
 }
 
-function addExtraScriptConfigs(baseConfig, userConfig) {
-	if (!userConfig.extraScripts.length) return baseConfig;
+function buildExtraScriptConfigs(userConfig) {
+	if (!userConfig.extraScripts.length) return [];
 
 	const output = [];
 
@@ -209,22 +216,55 @@ function addExtraScriptConfigs(baseConfig, userConfig) {
 		}));
 	}
 
-	return baseConfig.concat(output);
+	return output;
 }
 
-function addLastConfigStep(config) {
-	const lastConfig = config[config.length - 1];
-	if (!lastConfig.plugins) lastConfig.plugins = [];
-	lastConfig.plugins.push(new WebpackOnBuildPlugin(onBuildCompleted));
-	config[config.length - 1] = lastConfig;
-	return config;
+function main(processArgv) {
+	const yargs = require('yargs/yargs');
+	const argv = yargs(processArgv).argv;
+
+	const configName = argv['joplin-plugin-config'];
+	if (!configName) throw new Error('A config file must be specified via the --joplin-plugin-config flag');
+
+	// Webpack configurations run in parallel, while we need them to run in
+	// sequence, and to do that it seems the only way is to run webpack multiple
+	// times, with different config each time.
+
+	const configs = {
+		// Builds the main src/index.ts and copy the extra content from /src to
+		// /dist including scripts, CSS and any other asset.
+		buildMain: pluginConfig,
+
+		// Builds the extra scripts as defined in plugin.config.json. When doing
+		// so, some JavaScript files that were copied in the previous might be
+		// overwritten here by the compiled version. This is by design. The
+		// result is that JS files that don't need compilation, are simply
+		// copied to /dist, while those that do need it are correctly compiled.
+		buildExtraScripts: buildExtraScriptConfigs(userConfig),
+
+		// Ths config is for creating the .jpl, which is done via the plugin, so
+		// it doesn't actually need an entry and output, however webpack won't
+		// run without this. So we give it an entry that we know is going to
+		// exist and output in the publish dir. Then the plugin will delete this
+		// temporary file before packaging the plugin.
+		createArchive: createArchiveConfig,
+	};
+
+	// If we are running the first config step, we clean up and create the build
+	// directories.
+	if (configName === 'buildMain') {
+		fs.removeSync(distDir);
+		fs.removeSync(publishDir);
+		fs.mkdirpSync(publishDir);
+	}
+
+	return configs[configName];
 }
 
-let exportedConfigs = [pluginConfig];
+let exportedConfigs = [];
 
 try {
-	exportedConfigs = addExtraScriptConfigs(exportedConfigs, userConfig);
-	exportedConfigs = addLastConfigStep(exportedConfigs);
+	exportedConfigs = main(process.argv);
 } catch (error) {
 	console.error(chalk.red(error.message));
 	process.exit(1);
diff --git a/packages/app-cli/tests/support/plugins/dialog/.gitignore b/packages/app-cli/tests/support/plugins/dialog/.gitignore
index 7a4fea3fe7..622f443408 100644
--- a/packages/app-cli/tests/support/plugins/dialog/.gitignore
+++ b/packages/app-cli/tests/support/plugins/dialog/.gitignore
@@ -1,7 +1,3 @@
 dist/
 node_modules/
 publish/
-
-
-
-
diff --git a/packages/app-cli/tests/support/plugins/dialog/.npmignore b/packages/app-cli/tests/support/plugins/dialog/.npmignore
index 3f18d39bd0..80f70d77e9 100644
--- a/packages/app-cli/tests/support/plugins/dialog/.npmignore
+++ b/packages/app-cli/tests/support/plugins/dialog/.npmignore
@@ -6,7 +6,3 @@
 /dist
 tsconfig.json
 webpack.config.js
-
-
-
-
diff --git a/packages/app-cli/tests/support/plugins/dialog/api/JoplinContentScripts.d.ts b/packages/app-cli/tests/support/plugins/dialog/api/JoplinContentScripts.d.ts
index 09ad5178a4..145e9d145a 100644
--- a/packages/app-cli/tests/support/plugins/dialog/api/JoplinContentScripts.d.ts
+++ b/packages/app-cli/tests/support/plugins/dialog/api/JoplinContentScripts.d.ts
@@ -23,10 +23,18 @@ export default class JoplinContentScripts {
      * * [View the renderer demo plugin](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/content_script)
      * * [View the editor demo plugin](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/codemirror_content_script)
      *
+     * See also the [postMessage demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages)
+     *
      * @param type Defines how the script will be used. See the type definition for more information about each supported type.
      * @param id A unique ID for the content script.
      * @param scriptPath Must be a path relative to the plugin main script. For example, if your file content_script.js is next to your index.ts file, you would set `scriptPath` to `"./content_script.js`.
      */
     register(type: ContentScriptType, id: string, scriptPath: string): Promise<void>;
-    onMessage(id: string, callback: any): Promise<void>;
+    /**
+     * Listens to a messages sent from the content script using postMessage().
+     * See {@link ContentScriptType} for more information as well as the
+     * [postMessage
+     * demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages)
+     */
+    onMessage(contentScriptId: string, callback: any): Promise<void>;
 }
diff --git a/packages/app-cli/tests/support/plugins/dialog/api/types.ts b/packages/app-cli/tests/support/plugins/dialog/api/types.ts
index bc3219ac27..c8110fb650 100644
--- a/packages/app-cli/tests/support/plugins/dialog/api/types.ts
+++ b/packages/app-cli/tests/support/plugins/dialog/api/types.ts
@@ -458,7 +458,7 @@ export enum ContentScriptType {
 	 * });
 	 * ```
 	 *
-	 * See {@link JoplinContentScript.onMessage} for more details, as well as
+	 * See {@link JoplinContentScripts.onMessage} for more details, as well as
 	 * the [postMessage
 	 * demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages).
 	 *
@@ -557,7 +557,7 @@ export enum ContentScriptType {
 	 * });
 	 * ```
 	 *
-	 * See {@link JoplinContentScript.onMessage} for more details, as well as
+	 * See {@link JoplinContentScripts.onMessage} for more details, as well as
 	 * the [postMessage
 	 * demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages).
 	 *
diff --git a/packages/app-cli/tests/support/plugins/dialog/package.json b/packages/app-cli/tests/support/plugins/dialog/package.json
index 00ab0179db..ec3e6c1842 100644
--- a/packages/app-cli/tests/support/plugins/dialog/package.json
+++ b/packages/app-cli/tests/support/plugins/dialog/package.json
@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "description": "",
   "scripts": {
-    "dist": "webpack",
+    "dist": "webpack --joplin-plugin-config buildMain && webpack --joplin-plugin-config buildExtraScripts && webpack --joplin-plugin-config createArchive",
     "prepare": "npm run dist",
     "update": "npm install -g generator-joplin && yo joplin --update"
   },
@@ -22,6 +22,7 @@
     "typescript": "^3.9.3",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11",
-    "chalk": "^4.1.0"
+    "chalk": "^4.1.0",
+    "yargs": "^16.2.0"
   }
 }
\ No newline at end of file
diff --git a/packages/app-cli/tests/support/plugins/dialog/webpack.config.js b/packages/app-cli/tests/support/plugins/dialog/webpack.config.js
index 35538a5298..ec6c21ff26 100644
--- a/packages/app-cli/tests/support/plugins/dialog/webpack.config.js
+++ b/packages/app-cli/tests/support/plugins/dialog/webpack.config.js
@@ -33,10 +33,6 @@ const manifest = readManifest(manifestPath);
 const pluginArchiveFilePath = path.resolve(publishDir, `${manifest.id}.jpl`);
 const pluginInfoFilePath = path.resolve(publishDir, `${manifest.id}.json`);
 
-fs.removeSync(distDir);
-fs.removeSync(publishDir);
-fs.mkdirpSync(publishDir);
-
 function validatePackageJson() {
 	const content = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
 	if (!content.name || content.name.indexOf('joplin-plugin-') !== 0) {
@@ -109,6 +105,7 @@ function createPluginInfo(manifestPath, destPath, jplFilePath) {
 
 function onBuildCompleted() {
 	try {
+		fs.removeSync(path.resolve(publishDir, 'index.js'));
 		createPluginArchive(distDir, pluginArchiveFilePath);
 		createPluginInfo(manifestPath, pluginInfoFilePath, pluginArchiveFilePath);
 		validatePackageJson();
@@ -174,6 +171,16 @@ const extraScriptConfig = Object.assign({}, baseConfig, {
 	},
 });
 
+const createArchiveConfig = {
+	stats: 'errors-only',
+	entry: './dist/index.js',
+	output: {
+		filename: 'index.js',
+		path: publishDir,
+	},
+	plugins: [new WebpackOnBuildPlugin(onBuildCompleted)],
+};
+
 function resolveExtraScriptPath(name) {
 	const relativePath = `./src/${name}`;
 
@@ -196,8 +203,8 @@ function resolveExtraScriptPath(name) {
 	};
 }
 
-function addExtraScriptConfigs(baseConfig, userConfig) {
-	if (!userConfig.extraScripts.length) return baseConfig;
+function buildExtraScriptConfigs(userConfig) {
+	if (!userConfig.extraScripts.length) return [];
 
 	const output = [];
 
@@ -209,22 +216,55 @@ function addExtraScriptConfigs(baseConfig, userConfig) {
 		}));
 	}
 
-	return baseConfig.concat(output);
+	return output;
 }
 
-function addLastConfigStep(config) {
-	const lastConfig = config[config.length - 1];
-	if (!lastConfig.plugins) lastConfig.plugins = [];
-	lastConfig.plugins.push(new WebpackOnBuildPlugin(onBuildCompleted));
-	config[config.length - 1] = lastConfig;
-	return config;
+function main(processArgv) {
+	const yargs = require('yargs/yargs');
+	const argv = yargs(processArgv).argv;
+
+	const configName = argv['joplin-plugin-config'];
+	if (!configName) throw new Error('A config file must be specified via the --joplin-plugin-config flag');
+
+	// Webpack configurations run in parallel, while we need them to run in
+	// sequence, and to do that it seems the only way is to run webpack multiple
+	// times, with different config each time.
+
+	const configs = {
+		// Builds the main src/index.ts and copy the extra content from /src to
+		// /dist including scripts, CSS and any other asset.
+		buildMain: pluginConfig,
+
+		// Builds the extra scripts as defined in plugin.config.json. When doing
+		// so, some JavaScript files that were copied in the previous might be
+		// overwritten here by the compiled version. This is by design. The
+		// result is that JS files that don't need compilation, are simply
+		// copied to /dist, while those that do need it are correctly compiled.
+		buildExtraScripts: buildExtraScriptConfigs(userConfig),
+
+		// Ths config is for creating the .jpl, which is done via the plugin, so
+		// it doesn't actually need an entry and output, however webpack won't
+		// run without this. So we give it an entry that we know is going to
+		// exist and output in the publish dir. Then the plugin will delete this
+		// temporary file before packaging the plugin.
+		createArchive: createArchiveConfig,
+	};
+
+	// If we are running the first config step, we clean up and create the build
+	// directories.
+	if (configName === 'buildMain') {
+		fs.removeSync(distDir);
+		fs.removeSync(publishDir);
+		fs.mkdirpSync(publishDir);
+	}
+
+	return configs[configName];
 }
 
-let exportedConfigs = [pluginConfig];
+let exportedConfigs = [];
 
 try {
-	exportedConfigs = addExtraScriptConfigs(exportedConfigs, userConfig);
-	exportedConfigs = addLastConfigStep(exportedConfigs);
+	exportedConfigs = main(process.argv);
 } catch (error) {
 	console.error(chalk.red(error.message));
 	process.exit(1);
diff --git a/packages/app-cli/tests/support/plugins/editor_context_menu/.gitignore b/packages/app-cli/tests/support/plugins/editor_context_menu/.gitignore
index 7a4fea3fe7..622f443408 100644
--- a/packages/app-cli/tests/support/plugins/editor_context_menu/.gitignore
+++ b/packages/app-cli/tests/support/plugins/editor_context_menu/.gitignore
@@ -1,7 +1,3 @@
 dist/
 node_modules/
 publish/
-
-
-
-
diff --git a/packages/app-cli/tests/support/plugins/editor_context_menu/.npmignore b/packages/app-cli/tests/support/plugins/editor_context_menu/.npmignore
index 3f18d39bd0..80f70d77e9 100644
--- a/packages/app-cli/tests/support/plugins/editor_context_menu/.npmignore
+++ b/packages/app-cli/tests/support/plugins/editor_context_menu/.npmignore
@@ -6,7 +6,3 @@
 /dist
 tsconfig.json
 webpack.config.js
-
-
-
-
diff --git a/packages/app-cli/tests/support/plugins/editor_context_menu/api/JoplinContentScripts.d.ts b/packages/app-cli/tests/support/plugins/editor_context_menu/api/JoplinContentScripts.d.ts
index 09ad5178a4..145e9d145a 100644
--- a/packages/app-cli/tests/support/plugins/editor_context_menu/api/JoplinContentScripts.d.ts
+++ b/packages/app-cli/tests/support/plugins/editor_context_menu/api/JoplinContentScripts.d.ts
@@ -23,10 +23,18 @@ export default class JoplinContentScripts {
      * * [View the renderer demo plugin](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/content_script)
      * * [View the editor demo plugin](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/codemirror_content_script)
      *
+     * See also the [postMessage demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages)
+     *
      * @param type Defines how the script will be used. See the type definition for more information about each supported type.
      * @param id A unique ID for the content script.
      * @param scriptPath Must be a path relative to the plugin main script. For example, if your file content_script.js is next to your index.ts file, you would set `scriptPath` to `"./content_script.js`.
      */
     register(type: ContentScriptType, id: string, scriptPath: string): Promise<void>;
-    onMessage(id: string, callback: any): Promise<void>;
+    /**
+     * Listens to a messages sent from the content script using postMessage().
+     * See {@link ContentScriptType} for more information as well as the
+     * [postMessage
+     * demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages)
+     */
+    onMessage(contentScriptId: string, callback: any): Promise<void>;
 }
diff --git a/packages/app-cli/tests/support/plugins/editor_context_menu/api/types.ts b/packages/app-cli/tests/support/plugins/editor_context_menu/api/types.ts
index bc3219ac27..c8110fb650 100644
--- a/packages/app-cli/tests/support/plugins/editor_context_menu/api/types.ts
+++ b/packages/app-cli/tests/support/plugins/editor_context_menu/api/types.ts
@@ -458,7 +458,7 @@ export enum ContentScriptType {
 	 * });
 	 * ```
 	 *
-	 * See {@link JoplinContentScript.onMessage} for more details, as well as
+	 * See {@link JoplinContentScripts.onMessage} for more details, as well as
 	 * the [postMessage
 	 * demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages).
 	 *
@@ -557,7 +557,7 @@ export enum ContentScriptType {
 	 * });
 	 * ```
 	 *
-	 * See {@link JoplinContentScript.onMessage} for more details, as well as
+	 * See {@link JoplinContentScripts.onMessage} for more details, as well as
 	 * the [postMessage
 	 * demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages).
 	 *
diff --git a/packages/app-cli/tests/support/plugins/editor_context_menu/package.json b/packages/app-cli/tests/support/plugins/editor_context_menu/package.json
index 00ab0179db..ec3e6c1842 100644
--- a/packages/app-cli/tests/support/plugins/editor_context_menu/package.json
+++ b/packages/app-cli/tests/support/plugins/editor_context_menu/package.json
@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "description": "",
   "scripts": {
-    "dist": "webpack",
+    "dist": "webpack --joplin-plugin-config buildMain && webpack --joplin-plugin-config buildExtraScripts && webpack --joplin-plugin-config createArchive",
     "prepare": "npm run dist",
     "update": "npm install -g generator-joplin && yo joplin --update"
   },
@@ -22,6 +22,7 @@
     "typescript": "^3.9.3",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11",
-    "chalk": "^4.1.0"
+    "chalk": "^4.1.0",
+    "yargs": "^16.2.0"
   }
 }
\ No newline at end of file
diff --git a/packages/app-cli/tests/support/plugins/editor_context_menu/webpack.config.js b/packages/app-cli/tests/support/plugins/editor_context_menu/webpack.config.js
index 35538a5298..ec6c21ff26 100644
--- a/packages/app-cli/tests/support/plugins/editor_context_menu/webpack.config.js
+++ b/packages/app-cli/tests/support/plugins/editor_context_menu/webpack.config.js
@@ -33,10 +33,6 @@ const manifest = readManifest(manifestPath);
 const pluginArchiveFilePath = path.resolve(publishDir, `${manifest.id}.jpl`);
 const pluginInfoFilePath = path.resolve(publishDir, `${manifest.id}.json`);
 
-fs.removeSync(distDir);
-fs.removeSync(publishDir);
-fs.mkdirpSync(publishDir);
-
 function validatePackageJson() {
 	const content = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
 	if (!content.name || content.name.indexOf('joplin-plugin-') !== 0) {
@@ -109,6 +105,7 @@ function createPluginInfo(manifestPath, destPath, jplFilePath) {
 
 function onBuildCompleted() {
 	try {
+		fs.removeSync(path.resolve(publishDir, 'index.js'));
 		createPluginArchive(distDir, pluginArchiveFilePath);
 		createPluginInfo(manifestPath, pluginInfoFilePath, pluginArchiveFilePath);
 		validatePackageJson();
@@ -174,6 +171,16 @@ const extraScriptConfig = Object.assign({}, baseConfig, {
 	},
 });
 
+const createArchiveConfig = {
+	stats: 'errors-only',
+	entry: './dist/index.js',
+	output: {
+		filename: 'index.js',
+		path: publishDir,
+	},
+	plugins: [new WebpackOnBuildPlugin(onBuildCompleted)],
+};
+
 function resolveExtraScriptPath(name) {
 	const relativePath = `./src/${name}`;
 
@@ -196,8 +203,8 @@ function resolveExtraScriptPath(name) {
 	};
 }
 
-function addExtraScriptConfigs(baseConfig, userConfig) {
-	if (!userConfig.extraScripts.length) return baseConfig;
+function buildExtraScriptConfigs(userConfig) {
+	if (!userConfig.extraScripts.length) return [];
 
 	const output = [];
 
@@ -209,22 +216,55 @@ function addExtraScriptConfigs(baseConfig, userConfig) {
 		}));
 	}
 
-	return baseConfig.concat(output);
+	return output;
 }
 
-function addLastConfigStep(config) {
-	const lastConfig = config[config.length - 1];
-	if (!lastConfig.plugins) lastConfig.plugins = [];
-	lastConfig.plugins.push(new WebpackOnBuildPlugin(onBuildCompleted));
-	config[config.length - 1] = lastConfig;
-	return config;
+function main(processArgv) {
+	const yargs = require('yargs/yargs');
+	const argv = yargs(processArgv).argv;
+
+	const configName = argv['joplin-plugin-config'];
+	if (!configName) throw new Error('A config file must be specified via the --joplin-plugin-config flag');
+
+	// Webpack configurations run in parallel, while we need them to run in
+	// sequence, and to do that it seems the only way is to run webpack multiple
+	// times, with different config each time.
+
+	const configs = {
+		// Builds the main src/index.ts and copy the extra content from /src to
+		// /dist including scripts, CSS and any other asset.
+		buildMain: pluginConfig,
+
+		// Builds the extra scripts as defined in plugin.config.json. When doing
+		// so, some JavaScript files that were copied in the previous might be
+		// overwritten here by the compiled version. This is by design. The
+		// result is that JS files that don't need compilation, are simply
+		// copied to /dist, while those that do need it are correctly compiled.
+		buildExtraScripts: buildExtraScriptConfigs(userConfig),
+
+		// Ths config is for creating the .jpl, which is done via the plugin, so
+		// it doesn't actually need an entry and output, however webpack won't
+		// run without this. So we give it an entry that we know is going to
+		// exist and output in the publish dir. Then the plugin will delete this
+		// temporary file before packaging the plugin.
+		createArchive: createArchiveConfig,
+	};
+
+	// If we are running the first config step, we clean up and create the build
+	// directories.
+	if (configName === 'buildMain') {
+		fs.removeSync(distDir);
+		fs.removeSync(publishDir);
+		fs.mkdirpSync(publishDir);
+	}
+
+	return configs[configName];
 }
 
-let exportedConfigs = [pluginConfig];
+let exportedConfigs = [];
 
 try {
-	exportedConfigs = addExtraScriptConfigs(exportedConfigs, userConfig);
-	exportedConfigs = addLastConfigStep(exportedConfigs);
+	exportedConfigs = main(process.argv);
 } catch (error) {
 	console.error(chalk.red(error.message));
 	process.exit(1);
diff --git a/packages/app-cli/tests/support/plugins/events/.gitignore b/packages/app-cli/tests/support/plugins/events/.gitignore
index 7a4fea3fe7..622f443408 100644
--- a/packages/app-cli/tests/support/plugins/events/.gitignore
+++ b/packages/app-cli/tests/support/plugins/events/.gitignore
@@ -1,7 +1,3 @@
 dist/
 node_modules/
 publish/
-
-
-
-
diff --git a/packages/app-cli/tests/support/plugins/events/.npmignore b/packages/app-cli/tests/support/plugins/events/.npmignore
index 3f18d39bd0..80f70d77e9 100644
--- a/packages/app-cli/tests/support/plugins/events/.npmignore
+++ b/packages/app-cli/tests/support/plugins/events/.npmignore
@@ -6,7 +6,3 @@
 /dist
 tsconfig.json
 webpack.config.js
-
-
-
-
diff --git a/packages/app-cli/tests/support/plugins/events/api/JoplinContentScripts.d.ts b/packages/app-cli/tests/support/plugins/events/api/JoplinContentScripts.d.ts
index 09ad5178a4..145e9d145a 100644
--- a/packages/app-cli/tests/support/plugins/events/api/JoplinContentScripts.d.ts
+++ b/packages/app-cli/tests/support/plugins/events/api/JoplinContentScripts.d.ts
@@ -23,10 +23,18 @@ export default class JoplinContentScripts {
      * * [View the renderer demo plugin](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/content_script)
      * * [View the editor demo plugin](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/codemirror_content_script)
      *
+     * See also the [postMessage demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages)
+     *
      * @param type Defines how the script will be used. See the type definition for more information about each supported type.
      * @param id A unique ID for the content script.
      * @param scriptPath Must be a path relative to the plugin main script. For example, if your file content_script.js is next to your index.ts file, you would set `scriptPath` to `"./content_script.js`.
      */
     register(type: ContentScriptType, id: string, scriptPath: string): Promise<void>;
-    onMessage(id: string, callback: any): Promise<void>;
+    /**
+     * Listens to a messages sent from the content script using postMessage().
+     * See {@link ContentScriptType} for more information as well as the
+     * [postMessage
+     * demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages)
+     */
+    onMessage(contentScriptId: string, callback: any): Promise<void>;
 }
diff --git a/packages/app-cli/tests/support/plugins/events/api/types.ts b/packages/app-cli/tests/support/plugins/events/api/types.ts
index bc3219ac27..c8110fb650 100644
--- a/packages/app-cli/tests/support/plugins/events/api/types.ts
+++ b/packages/app-cli/tests/support/plugins/events/api/types.ts
@@ -458,7 +458,7 @@ export enum ContentScriptType {
 	 * });
 	 * ```
 	 *
-	 * See {@link JoplinContentScript.onMessage} for more details, as well as
+	 * See {@link JoplinContentScripts.onMessage} for more details, as well as
 	 * the [postMessage
 	 * demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages).
 	 *
@@ -557,7 +557,7 @@ export enum ContentScriptType {
 	 * });
 	 * ```
 	 *
-	 * See {@link JoplinContentScript.onMessage} for more details, as well as
+	 * See {@link JoplinContentScripts.onMessage} for more details, as well as
 	 * the [postMessage
 	 * demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages).
 	 *
diff --git a/packages/app-cli/tests/support/plugins/events/package.json b/packages/app-cli/tests/support/plugins/events/package.json
index 00ab0179db..ec3e6c1842 100644
--- a/packages/app-cli/tests/support/plugins/events/package.json
+++ b/packages/app-cli/tests/support/plugins/events/package.json
@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "description": "",
   "scripts": {
-    "dist": "webpack",
+    "dist": "webpack --joplin-plugin-config buildMain && webpack --joplin-plugin-config buildExtraScripts && webpack --joplin-plugin-config createArchive",
     "prepare": "npm run dist",
     "update": "npm install -g generator-joplin && yo joplin --update"
   },
@@ -22,6 +22,7 @@
     "typescript": "^3.9.3",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11",
-    "chalk": "^4.1.0"
+    "chalk": "^4.1.0",
+    "yargs": "^16.2.0"
   }
 }
\ No newline at end of file
diff --git a/packages/app-cli/tests/support/plugins/events/webpack.config.js b/packages/app-cli/tests/support/plugins/events/webpack.config.js
index 35538a5298..ec6c21ff26 100644
--- a/packages/app-cli/tests/support/plugins/events/webpack.config.js
+++ b/packages/app-cli/tests/support/plugins/events/webpack.config.js
@@ -33,10 +33,6 @@ const manifest = readManifest(manifestPath);
 const pluginArchiveFilePath = path.resolve(publishDir, `${manifest.id}.jpl`);
 const pluginInfoFilePath = path.resolve(publishDir, `${manifest.id}.json`);
 
-fs.removeSync(distDir);
-fs.removeSync(publishDir);
-fs.mkdirpSync(publishDir);
-
 function validatePackageJson() {
 	const content = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
 	if (!content.name || content.name.indexOf('joplin-plugin-') !== 0) {
@@ -109,6 +105,7 @@ function createPluginInfo(manifestPath, destPath, jplFilePath) {
 
 function onBuildCompleted() {
 	try {
+		fs.removeSync(path.resolve(publishDir, 'index.js'));
 		createPluginArchive(distDir, pluginArchiveFilePath);
 		createPluginInfo(manifestPath, pluginInfoFilePath, pluginArchiveFilePath);
 		validatePackageJson();
@@ -174,6 +171,16 @@ const extraScriptConfig = Object.assign({}, baseConfig, {
 	},
 });
 
+const createArchiveConfig = {
+	stats: 'errors-only',
+	entry: './dist/index.js',
+	output: {
+		filename: 'index.js',
+		path: publishDir,
+	},
+	plugins: [new WebpackOnBuildPlugin(onBuildCompleted)],
+};
+
 function resolveExtraScriptPath(name) {
 	const relativePath = `./src/${name}`;
 
@@ -196,8 +203,8 @@ function resolveExtraScriptPath(name) {
 	};
 }
 
-function addExtraScriptConfigs(baseConfig, userConfig) {
-	if (!userConfig.extraScripts.length) return baseConfig;
+function buildExtraScriptConfigs(userConfig) {
+	if (!userConfig.extraScripts.length) return [];
 
 	const output = [];
 
@@ -209,22 +216,55 @@ function addExtraScriptConfigs(baseConfig, userConfig) {
 		}));
 	}
 
-	return baseConfig.concat(output);
+	return output;
 }
 
-function addLastConfigStep(config) {
-	const lastConfig = config[config.length - 1];
-	if (!lastConfig.plugins) lastConfig.plugins = [];
-	lastConfig.plugins.push(new WebpackOnBuildPlugin(onBuildCompleted));
-	config[config.length - 1] = lastConfig;
-	return config;
+function main(processArgv) {
+	const yargs = require('yargs/yargs');
+	const argv = yargs(processArgv).argv;
+
+	const configName = argv['joplin-plugin-config'];
+	if (!configName) throw new Error('A config file must be specified via the --joplin-plugin-config flag');
+
+	// Webpack configurations run in parallel, while we need them to run in
+	// sequence, and to do that it seems the only way is to run webpack multiple
+	// times, with different config each time.
+
+	const configs = {
+		// Builds the main src/index.ts and copy the extra content from /src to
+		// /dist including scripts, CSS and any other asset.
+		buildMain: pluginConfig,
+
+		// Builds the extra scripts as defined in plugin.config.json. When doing
+		// so, some JavaScript files that were copied in the previous might be
+		// overwritten here by the compiled version. This is by design. The
+		// result is that JS files that don't need compilation, are simply
+		// copied to /dist, while those that do need it are correctly compiled.
+		buildExtraScripts: buildExtraScriptConfigs(userConfig),
+
+		// Ths config is for creating the .jpl, which is done via the plugin, so
+		// it doesn't actually need an entry and output, however webpack won't
+		// run without this. So we give it an entry that we know is going to
+		// exist and output in the publish dir. Then the plugin will delete this
+		// temporary file before packaging the plugin.
+		createArchive: createArchiveConfig,
+	};
+
+	// If we are running the first config step, we clean up and create the build
+	// directories.
+	if (configName === 'buildMain') {
+		fs.removeSync(distDir);
+		fs.removeSync(publishDir);
+		fs.mkdirpSync(publishDir);
+	}
+
+	return configs[configName];
 }
 
-let exportedConfigs = [pluginConfig];
+let exportedConfigs = [];
 
 try {
-	exportedConfigs = addExtraScriptConfigs(exportedConfigs, userConfig);
-	exportedConfigs = addLastConfigStep(exportedConfigs);
+	exportedConfigs = main(process.argv);
 } catch (error) {
 	console.error(chalk.red(error.message));
 	process.exit(1);
diff --git a/packages/app-cli/tests/support/plugins/jpl_test/.gitignore b/packages/app-cli/tests/support/plugins/jpl_test/.gitignore
index 7a4fea3fe7..622f443408 100644
--- a/packages/app-cli/tests/support/plugins/jpl_test/.gitignore
+++ b/packages/app-cli/tests/support/plugins/jpl_test/.gitignore
@@ -1,7 +1,3 @@
 dist/
 node_modules/
 publish/
-
-
-
-
diff --git a/packages/app-cli/tests/support/plugins/jpl_test/.npmignore b/packages/app-cli/tests/support/plugins/jpl_test/.npmignore
index 3f18d39bd0..80f70d77e9 100644
--- a/packages/app-cli/tests/support/plugins/jpl_test/.npmignore
+++ b/packages/app-cli/tests/support/plugins/jpl_test/.npmignore
@@ -6,7 +6,3 @@
 /dist
 tsconfig.json
 webpack.config.js
-
-
-
-
diff --git a/packages/app-cli/tests/support/plugins/jpl_test/api/JoplinContentScripts.d.ts b/packages/app-cli/tests/support/plugins/jpl_test/api/JoplinContentScripts.d.ts
index 09ad5178a4..145e9d145a 100644
--- a/packages/app-cli/tests/support/plugins/jpl_test/api/JoplinContentScripts.d.ts
+++ b/packages/app-cli/tests/support/plugins/jpl_test/api/JoplinContentScripts.d.ts
@@ -23,10 +23,18 @@ export default class JoplinContentScripts {
      * * [View the renderer demo plugin](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/content_script)
      * * [View the editor demo plugin](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/codemirror_content_script)
      *
+     * See also the [postMessage demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages)
+     *
      * @param type Defines how the script will be used. See the type definition for more information about each supported type.
      * @param id A unique ID for the content script.
      * @param scriptPath Must be a path relative to the plugin main script. For example, if your file content_script.js is next to your index.ts file, you would set `scriptPath` to `"./content_script.js`.
      */
     register(type: ContentScriptType, id: string, scriptPath: string): Promise<void>;
-    onMessage(id: string, callback: any): Promise<void>;
+    /**
+     * Listens to a messages sent from the content script using postMessage().
+     * See {@link ContentScriptType} for more information as well as the
+     * [postMessage
+     * demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages)
+     */
+    onMessage(contentScriptId: string, callback: any): Promise<void>;
 }
diff --git a/packages/app-cli/tests/support/plugins/jpl_test/api/types.ts b/packages/app-cli/tests/support/plugins/jpl_test/api/types.ts
index bc3219ac27..c8110fb650 100644
--- a/packages/app-cli/tests/support/plugins/jpl_test/api/types.ts
+++ b/packages/app-cli/tests/support/plugins/jpl_test/api/types.ts
@@ -458,7 +458,7 @@ export enum ContentScriptType {
 	 * });
 	 * ```
 	 *
-	 * See {@link JoplinContentScript.onMessage} for more details, as well as
+	 * See {@link JoplinContentScripts.onMessage} for more details, as well as
 	 * the [postMessage
 	 * demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages).
 	 *
@@ -557,7 +557,7 @@ export enum ContentScriptType {
 	 * });
 	 * ```
 	 *
-	 * See {@link JoplinContentScript.onMessage} for more details, as well as
+	 * See {@link JoplinContentScripts.onMessage} for more details, as well as
 	 * the [postMessage
 	 * demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages).
 	 *
diff --git a/packages/app-cli/tests/support/plugins/jpl_test/package.json b/packages/app-cli/tests/support/plugins/jpl_test/package.json
index 00ab0179db..ec3e6c1842 100644
--- a/packages/app-cli/tests/support/plugins/jpl_test/package.json
+++ b/packages/app-cli/tests/support/plugins/jpl_test/package.json
@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "description": "",
   "scripts": {
-    "dist": "webpack",
+    "dist": "webpack --joplin-plugin-config buildMain && webpack --joplin-plugin-config buildExtraScripts && webpack --joplin-plugin-config createArchive",
     "prepare": "npm run dist",
     "update": "npm install -g generator-joplin && yo joplin --update"
   },
@@ -22,6 +22,7 @@
     "typescript": "^3.9.3",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11",
-    "chalk": "^4.1.0"
+    "chalk": "^4.1.0",
+    "yargs": "^16.2.0"
   }
 }
\ No newline at end of file
diff --git a/packages/app-cli/tests/support/plugins/jpl_test/webpack.config.js b/packages/app-cli/tests/support/plugins/jpl_test/webpack.config.js
index 35538a5298..ec6c21ff26 100644
--- a/packages/app-cli/tests/support/plugins/jpl_test/webpack.config.js
+++ b/packages/app-cli/tests/support/plugins/jpl_test/webpack.config.js
@@ -33,10 +33,6 @@ const manifest = readManifest(manifestPath);
 const pluginArchiveFilePath = path.resolve(publishDir, `${manifest.id}.jpl`);
 const pluginInfoFilePath = path.resolve(publishDir, `${manifest.id}.json`);
 
-fs.removeSync(distDir);
-fs.removeSync(publishDir);
-fs.mkdirpSync(publishDir);
-
 function validatePackageJson() {
 	const content = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
 	if (!content.name || content.name.indexOf('joplin-plugin-') !== 0) {
@@ -109,6 +105,7 @@ function createPluginInfo(manifestPath, destPath, jplFilePath) {
 
 function onBuildCompleted() {
 	try {
+		fs.removeSync(path.resolve(publishDir, 'index.js'));
 		createPluginArchive(distDir, pluginArchiveFilePath);
 		createPluginInfo(manifestPath, pluginInfoFilePath, pluginArchiveFilePath);
 		validatePackageJson();
@@ -174,6 +171,16 @@ const extraScriptConfig = Object.assign({}, baseConfig, {
 	},
 });
 
+const createArchiveConfig = {
+	stats: 'errors-only',
+	entry: './dist/index.js',
+	output: {
+		filename: 'index.js',
+		path: publishDir,
+	},
+	plugins: [new WebpackOnBuildPlugin(onBuildCompleted)],
+};
+
 function resolveExtraScriptPath(name) {
 	const relativePath = `./src/${name}`;
 
@@ -196,8 +203,8 @@ function resolveExtraScriptPath(name) {
 	};
 }
 
-function addExtraScriptConfigs(baseConfig, userConfig) {
-	if (!userConfig.extraScripts.length) return baseConfig;
+function buildExtraScriptConfigs(userConfig) {
+	if (!userConfig.extraScripts.length) return [];
 
 	const output = [];
 
@@ -209,22 +216,55 @@ function addExtraScriptConfigs(baseConfig, userConfig) {
 		}));
 	}
 
-	return baseConfig.concat(output);
+	return output;
 }
 
-function addLastConfigStep(config) {
-	const lastConfig = config[config.length - 1];
-	if (!lastConfig.plugins) lastConfig.plugins = [];
-	lastConfig.plugins.push(new WebpackOnBuildPlugin(onBuildCompleted));
-	config[config.length - 1] = lastConfig;
-	return config;
+function main(processArgv) {
+	const yargs = require('yargs/yargs');
+	const argv = yargs(processArgv).argv;
+
+	const configName = argv['joplin-plugin-config'];
+	if (!configName) throw new Error('A config file must be specified via the --joplin-plugin-config flag');
+
+	// Webpack configurations run in parallel, while we need them to run in
+	// sequence, and to do that it seems the only way is to run webpack multiple
+	// times, with different config each time.
+
+	const configs = {
+		// Builds the main src/index.ts and copy the extra content from /src to
+		// /dist including scripts, CSS and any other asset.
+		buildMain: pluginConfig,
+
+		// Builds the extra scripts as defined in plugin.config.json. When doing
+		// so, some JavaScript files that were copied in the previous might be
+		// overwritten here by the compiled version. This is by design. The
+		// result is that JS files that don't need compilation, are simply
+		// copied to /dist, while those that do need it are correctly compiled.
+		buildExtraScripts: buildExtraScriptConfigs(userConfig),
+
+		// Ths config is for creating the .jpl, which is done via the plugin, so
+		// it doesn't actually need an entry and output, however webpack won't
+		// run without this. So we give it an entry that we know is going to
+		// exist and output in the publish dir. Then the plugin will delete this
+		// temporary file before packaging the plugin.
+		createArchive: createArchiveConfig,
+	};
+
+	// If we are running the first config step, we clean up and create the build
+	// directories.
+	if (configName === 'buildMain') {
+		fs.removeSync(distDir);
+		fs.removeSync(publishDir);
+		fs.mkdirpSync(publishDir);
+	}
+
+	return configs[configName];
 }
 
-let exportedConfigs = [pluginConfig];
+let exportedConfigs = [];
 
 try {
-	exportedConfigs = addExtraScriptConfigs(exportedConfigs, userConfig);
-	exportedConfigs = addLastConfigStep(exportedConfigs);
+	exportedConfigs = main(process.argv);
 } catch (error) {
 	console.error(chalk.red(error.message));
 	process.exit(1);
diff --git a/packages/app-cli/tests/support/plugins/json_export/.gitignore b/packages/app-cli/tests/support/plugins/json_export/.gitignore
index 7a4fea3fe7..622f443408 100644
--- a/packages/app-cli/tests/support/plugins/json_export/.gitignore
+++ b/packages/app-cli/tests/support/plugins/json_export/.gitignore
@@ -1,7 +1,3 @@
 dist/
 node_modules/
 publish/
-
-
-
-
diff --git a/packages/app-cli/tests/support/plugins/json_export/.npmignore b/packages/app-cli/tests/support/plugins/json_export/.npmignore
index 3f18d39bd0..80f70d77e9 100644
--- a/packages/app-cli/tests/support/plugins/json_export/.npmignore
+++ b/packages/app-cli/tests/support/plugins/json_export/.npmignore
@@ -6,7 +6,3 @@
 /dist
 tsconfig.json
 webpack.config.js
-
-
-
-
diff --git a/packages/app-cli/tests/support/plugins/json_export/api/JoplinContentScripts.d.ts b/packages/app-cli/tests/support/plugins/json_export/api/JoplinContentScripts.d.ts
index 09ad5178a4..145e9d145a 100644
--- a/packages/app-cli/tests/support/plugins/json_export/api/JoplinContentScripts.d.ts
+++ b/packages/app-cli/tests/support/plugins/json_export/api/JoplinContentScripts.d.ts
@@ -23,10 +23,18 @@ export default class JoplinContentScripts {
      * * [View the renderer demo plugin](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/content_script)
      * * [View the editor demo plugin](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/codemirror_content_script)
      *
+     * See also the [postMessage demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages)
+     *
      * @param type Defines how the script will be used. See the type definition for more information about each supported type.
      * @param id A unique ID for the content script.
      * @param scriptPath Must be a path relative to the plugin main script. For example, if your file content_script.js is next to your index.ts file, you would set `scriptPath` to `"./content_script.js`.
      */
     register(type: ContentScriptType, id: string, scriptPath: string): Promise<void>;
-    onMessage(id: string, callback: any): Promise<void>;
+    /**
+     * Listens to a messages sent from the content script using postMessage().
+     * See {@link ContentScriptType} for more information as well as the
+     * [postMessage
+     * demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages)
+     */
+    onMessage(contentScriptId: string, callback: any): Promise<void>;
 }
diff --git a/packages/app-cli/tests/support/plugins/json_export/api/types.ts b/packages/app-cli/tests/support/plugins/json_export/api/types.ts
index bc3219ac27..c8110fb650 100644
--- a/packages/app-cli/tests/support/plugins/json_export/api/types.ts
+++ b/packages/app-cli/tests/support/plugins/json_export/api/types.ts
@@ -458,7 +458,7 @@ export enum ContentScriptType {
 	 * });
 	 * ```
 	 *
-	 * See {@link JoplinContentScript.onMessage} for more details, as well as
+	 * See {@link JoplinContentScripts.onMessage} for more details, as well as
 	 * the [postMessage
 	 * demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages).
 	 *
@@ -557,7 +557,7 @@ export enum ContentScriptType {
 	 * });
 	 * ```
 	 *
-	 * See {@link JoplinContentScript.onMessage} for more details, as well as
+	 * See {@link JoplinContentScripts.onMessage} for more details, as well as
 	 * the [postMessage
 	 * demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages).
 	 *
diff --git a/packages/app-cli/tests/support/plugins/json_export/package.json b/packages/app-cli/tests/support/plugins/json_export/package.json
index 00ab0179db..ec3e6c1842 100644
--- a/packages/app-cli/tests/support/plugins/json_export/package.json
+++ b/packages/app-cli/tests/support/plugins/json_export/package.json
@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "description": "",
   "scripts": {
-    "dist": "webpack",
+    "dist": "webpack --joplin-plugin-config buildMain && webpack --joplin-plugin-config buildExtraScripts && webpack --joplin-plugin-config createArchive",
     "prepare": "npm run dist",
     "update": "npm install -g generator-joplin && yo joplin --update"
   },
@@ -22,6 +22,7 @@
     "typescript": "^3.9.3",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11",
-    "chalk": "^4.1.0"
+    "chalk": "^4.1.0",
+    "yargs": "^16.2.0"
   }
 }
\ No newline at end of file
diff --git a/packages/app-cli/tests/support/plugins/json_export/webpack.config.js b/packages/app-cli/tests/support/plugins/json_export/webpack.config.js
index 35538a5298..ec6c21ff26 100644
--- a/packages/app-cli/tests/support/plugins/json_export/webpack.config.js
+++ b/packages/app-cli/tests/support/plugins/json_export/webpack.config.js
@@ -33,10 +33,6 @@ const manifest = readManifest(manifestPath);
 const pluginArchiveFilePath = path.resolve(publishDir, `${manifest.id}.jpl`);
 const pluginInfoFilePath = path.resolve(publishDir, `${manifest.id}.json`);
 
-fs.removeSync(distDir);
-fs.removeSync(publishDir);
-fs.mkdirpSync(publishDir);
-
 function validatePackageJson() {
 	const content = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
 	if (!content.name || content.name.indexOf('joplin-plugin-') !== 0) {
@@ -109,6 +105,7 @@ function createPluginInfo(manifestPath, destPath, jplFilePath) {
 
 function onBuildCompleted() {
 	try {
+		fs.removeSync(path.resolve(publishDir, 'index.js'));
 		createPluginArchive(distDir, pluginArchiveFilePath);
 		createPluginInfo(manifestPath, pluginInfoFilePath, pluginArchiveFilePath);
 		validatePackageJson();
@@ -174,6 +171,16 @@ const extraScriptConfig = Object.assign({}, baseConfig, {
 	},
 });
 
+const createArchiveConfig = {
+	stats: 'errors-only',
+	entry: './dist/index.js',
+	output: {
+		filename: 'index.js',
+		path: publishDir,
+	},
+	plugins: [new WebpackOnBuildPlugin(onBuildCompleted)],
+};
+
 function resolveExtraScriptPath(name) {
 	const relativePath = `./src/${name}`;
 
@@ -196,8 +203,8 @@ function resolveExtraScriptPath(name) {
 	};
 }
 
-function addExtraScriptConfigs(baseConfig, userConfig) {
-	if (!userConfig.extraScripts.length) return baseConfig;
+function buildExtraScriptConfigs(userConfig) {
+	if (!userConfig.extraScripts.length) return [];
 
 	const output = [];
 
@@ -209,22 +216,55 @@ function addExtraScriptConfigs(baseConfig, userConfig) {
 		}));
 	}
 
-	return baseConfig.concat(output);
+	return output;
 }
 
-function addLastConfigStep(config) {
-	const lastConfig = config[config.length - 1];
-	if (!lastConfig.plugins) lastConfig.plugins = [];
-	lastConfig.plugins.push(new WebpackOnBuildPlugin(onBuildCompleted));
-	config[config.length - 1] = lastConfig;
-	return config;
+function main(processArgv) {
+	const yargs = require('yargs/yargs');
+	const argv = yargs(processArgv).argv;
+
+	const configName = argv['joplin-plugin-config'];
+	if (!configName) throw new Error('A config file must be specified via the --joplin-plugin-config flag');
+
+	// Webpack configurations run in parallel, while we need them to run in
+	// sequence, and to do that it seems the only way is to run webpack multiple
+	// times, with different config each time.
+
+	const configs = {
+		// Builds the main src/index.ts and copy the extra content from /src to
+		// /dist including scripts, CSS and any other asset.
+		buildMain: pluginConfig,
+
+		// Builds the extra scripts as defined in plugin.config.json. When doing
+		// so, some JavaScript files that were copied in the previous might be
+		// overwritten here by the compiled version. This is by design. The
+		// result is that JS files that don't need compilation, are simply
+		// copied to /dist, while those that do need it are correctly compiled.
+		buildExtraScripts: buildExtraScriptConfigs(userConfig),
+
+		// Ths config is for creating the .jpl, which is done via the plugin, so
+		// it doesn't actually need an entry and output, however webpack won't
+		// run without this. So we give it an entry that we know is going to
+		// exist and output in the publish dir. Then the plugin will delete this
+		// temporary file before packaging the plugin.
+		createArchive: createArchiveConfig,
+	};
+
+	// If we are running the first config step, we clean up and create the build
+	// directories.
+	if (configName === 'buildMain') {
+		fs.removeSync(distDir);
+		fs.removeSync(publishDir);
+		fs.mkdirpSync(publishDir);
+	}
+
+	return configs[configName];
 }
 
-let exportedConfigs = [pluginConfig];
+let exportedConfigs = [];
 
 try {
-	exportedConfigs = addExtraScriptConfigs(exportedConfigs, userConfig);
-	exportedConfigs = addLastConfigStep(exportedConfigs);
+	exportedConfigs = main(process.argv);
 } catch (error) {
 	console.error(chalk.red(error.message));
 	process.exit(1);
diff --git a/packages/app-cli/tests/support/plugins/menu/.gitignore b/packages/app-cli/tests/support/plugins/menu/.gitignore
index 7a4fea3fe7..622f443408 100644
--- a/packages/app-cli/tests/support/plugins/menu/.gitignore
+++ b/packages/app-cli/tests/support/plugins/menu/.gitignore
@@ -1,7 +1,3 @@
 dist/
 node_modules/
 publish/
-
-
-
-
diff --git a/packages/app-cli/tests/support/plugins/menu/.npmignore b/packages/app-cli/tests/support/plugins/menu/.npmignore
index 3f18d39bd0..80f70d77e9 100644
--- a/packages/app-cli/tests/support/plugins/menu/.npmignore
+++ b/packages/app-cli/tests/support/plugins/menu/.npmignore
@@ -6,7 +6,3 @@
 /dist
 tsconfig.json
 webpack.config.js
-
-
-
-
diff --git a/packages/app-cli/tests/support/plugins/menu/api/JoplinContentScripts.d.ts b/packages/app-cli/tests/support/plugins/menu/api/JoplinContentScripts.d.ts
index 09ad5178a4..145e9d145a 100644
--- a/packages/app-cli/tests/support/plugins/menu/api/JoplinContentScripts.d.ts
+++ b/packages/app-cli/tests/support/plugins/menu/api/JoplinContentScripts.d.ts
@@ -23,10 +23,18 @@ export default class JoplinContentScripts {
      * * [View the renderer demo plugin](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/content_script)
      * * [View the editor demo plugin](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/codemirror_content_script)
      *
+     * See also the [postMessage demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages)
+     *
      * @param type Defines how the script will be used. See the type definition for more information about each supported type.
      * @param id A unique ID for the content script.
      * @param scriptPath Must be a path relative to the plugin main script. For example, if your file content_script.js is next to your index.ts file, you would set `scriptPath` to `"./content_script.js`.
      */
     register(type: ContentScriptType, id: string, scriptPath: string): Promise<void>;
-    onMessage(id: string, callback: any): Promise<void>;
+    /**
+     * Listens to a messages sent from the content script using postMessage().
+     * See {@link ContentScriptType} for more information as well as the
+     * [postMessage
+     * demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages)
+     */
+    onMessage(contentScriptId: string, callback: any): Promise<void>;
 }
diff --git a/packages/app-cli/tests/support/plugins/menu/api/types.ts b/packages/app-cli/tests/support/plugins/menu/api/types.ts
index bc3219ac27..c8110fb650 100644
--- a/packages/app-cli/tests/support/plugins/menu/api/types.ts
+++ b/packages/app-cli/tests/support/plugins/menu/api/types.ts
@@ -458,7 +458,7 @@ export enum ContentScriptType {
 	 * });
 	 * ```
 	 *
-	 * See {@link JoplinContentScript.onMessage} for more details, as well as
+	 * See {@link JoplinContentScripts.onMessage} for more details, as well as
 	 * the [postMessage
 	 * demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages).
 	 *
@@ -557,7 +557,7 @@ export enum ContentScriptType {
 	 * });
 	 * ```
 	 *
-	 * See {@link JoplinContentScript.onMessage} for more details, as well as
+	 * See {@link JoplinContentScripts.onMessage} for more details, as well as
 	 * the [postMessage
 	 * demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages).
 	 *
diff --git a/packages/app-cli/tests/support/plugins/menu/package.json b/packages/app-cli/tests/support/plugins/menu/package.json
index 00ab0179db..ec3e6c1842 100644
--- a/packages/app-cli/tests/support/plugins/menu/package.json
+++ b/packages/app-cli/tests/support/plugins/menu/package.json
@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "description": "",
   "scripts": {
-    "dist": "webpack",
+    "dist": "webpack --joplin-plugin-config buildMain && webpack --joplin-plugin-config buildExtraScripts && webpack --joplin-plugin-config createArchive",
     "prepare": "npm run dist",
     "update": "npm install -g generator-joplin && yo joplin --update"
   },
@@ -22,6 +22,7 @@
     "typescript": "^3.9.3",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11",
-    "chalk": "^4.1.0"
+    "chalk": "^4.1.0",
+    "yargs": "^16.2.0"
   }
 }
\ No newline at end of file
diff --git a/packages/app-cli/tests/support/plugins/menu/webpack.config.js b/packages/app-cli/tests/support/plugins/menu/webpack.config.js
index 35538a5298..ec6c21ff26 100644
--- a/packages/app-cli/tests/support/plugins/menu/webpack.config.js
+++ b/packages/app-cli/tests/support/plugins/menu/webpack.config.js
@@ -33,10 +33,6 @@ const manifest = readManifest(manifestPath);
 const pluginArchiveFilePath = path.resolve(publishDir, `${manifest.id}.jpl`);
 const pluginInfoFilePath = path.resolve(publishDir, `${manifest.id}.json`);
 
-fs.removeSync(distDir);
-fs.removeSync(publishDir);
-fs.mkdirpSync(publishDir);
-
 function validatePackageJson() {
 	const content = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
 	if (!content.name || content.name.indexOf('joplin-plugin-') !== 0) {
@@ -109,6 +105,7 @@ function createPluginInfo(manifestPath, destPath, jplFilePath) {
 
 function onBuildCompleted() {
 	try {
+		fs.removeSync(path.resolve(publishDir, 'index.js'));
 		createPluginArchive(distDir, pluginArchiveFilePath);
 		createPluginInfo(manifestPath, pluginInfoFilePath, pluginArchiveFilePath);
 		validatePackageJson();
@@ -174,6 +171,16 @@ const extraScriptConfig = Object.assign({}, baseConfig, {
 	},
 });
 
+const createArchiveConfig = {
+	stats: 'errors-only',
+	entry: './dist/index.js',
+	output: {
+		filename: 'index.js',
+		path: publishDir,
+	},
+	plugins: [new WebpackOnBuildPlugin(onBuildCompleted)],
+};
+
 function resolveExtraScriptPath(name) {
 	const relativePath = `./src/${name}`;
 
@@ -196,8 +203,8 @@ function resolveExtraScriptPath(name) {
 	};
 }
 
-function addExtraScriptConfigs(baseConfig, userConfig) {
-	if (!userConfig.extraScripts.length) return baseConfig;
+function buildExtraScriptConfigs(userConfig) {
+	if (!userConfig.extraScripts.length) return [];
 
 	const output = [];
 
@@ -209,22 +216,55 @@ function addExtraScriptConfigs(baseConfig, userConfig) {
 		}));
 	}
 
-	return baseConfig.concat(output);
+	return output;
 }
 
-function addLastConfigStep(config) {
-	const lastConfig = config[config.length - 1];
-	if (!lastConfig.plugins) lastConfig.plugins = [];
-	lastConfig.plugins.push(new WebpackOnBuildPlugin(onBuildCompleted));
-	config[config.length - 1] = lastConfig;
-	return config;
+function main(processArgv) {
+	const yargs = require('yargs/yargs');
+	const argv = yargs(processArgv).argv;
+
+	const configName = argv['joplin-plugin-config'];
+	if (!configName) throw new Error('A config file must be specified via the --joplin-plugin-config flag');
+
+	// Webpack configurations run in parallel, while we need them to run in
+	// sequence, and to do that it seems the only way is to run webpack multiple
+	// times, with different config each time.
+
+	const configs = {
+		// Builds the main src/index.ts and copy the extra content from /src to
+		// /dist including scripts, CSS and any other asset.
+		buildMain: pluginConfig,
+
+		// Builds the extra scripts as defined in plugin.config.json. When doing
+		// so, some JavaScript files that were copied in the previous might be
+		// overwritten here by the compiled version. This is by design. The
+		// result is that JS files that don't need compilation, are simply
+		// copied to /dist, while those that do need it are correctly compiled.
+		buildExtraScripts: buildExtraScriptConfigs(userConfig),
+
+		// Ths config is for creating the .jpl, which is done via the plugin, so
+		// it doesn't actually need an entry and output, however webpack won't
+		// run without this. So we give it an entry that we know is going to
+		// exist and output in the publish dir. Then the plugin will delete this
+		// temporary file before packaging the plugin.
+		createArchive: createArchiveConfig,
+	};
+
+	// If we are running the first config step, we clean up and create the build
+	// directories.
+	if (configName === 'buildMain') {
+		fs.removeSync(distDir);
+		fs.removeSync(publishDir);
+		fs.mkdirpSync(publishDir);
+	}
+
+	return configs[configName];
 }
 
-let exportedConfigs = [pluginConfig];
+let exportedConfigs = [];
 
 try {
-	exportedConfigs = addExtraScriptConfigs(exportedConfigs, userConfig);
-	exportedConfigs = addLastConfigStep(exportedConfigs);
+	exportedConfigs = main(process.argv);
 } catch (error) {
 	console.error(chalk.red(error.message));
 	process.exit(1);
diff --git a/packages/app-cli/tests/support/plugins/multi_selection/.gitignore b/packages/app-cli/tests/support/plugins/multi_selection/.gitignore
index 7a4fea3fe7..622f443408 100644
--- a/packages/app-cli/tests/support/plugins/multi_selection/.gitignore
+++ b/packages/app-cli/tests/support/plugins/multi_selection/.gitignore
@@ -1,7 +1,3 @@
 dist/
 node_modules/
 publish/
-
-
-
-
diff --git a/packages/app-cli/tests/support/plugins/multi_selection/.npmignore b/packages/app-cli/tests/support/plugins/multi_selection/.npmignore
index 3f18d39bd0..80f70d77e9 100644
--- a/packages/app-cli/tests/support/plugins/multi_selection/.npmignore
+++ b/packages/app-cli/tests/support/plugins/multi_selection/.npmignore
@@ -6,7 +6,3 @@
 /dist
 tsconfig.json
 webpack.config.js
-
-
-
-
diff --git a/packages/app-cli/tests/support/plugins/multi_selection/api/JoplinContentScripts.d.ts b/packages/app-cli/tests/support/plugins/multi_selection/api/JoplinContentScripts.d.ts
index 09ad5178a4..145e9d145a 100644
--- a/packages/app-cli/tests/support/plugins/multi_selection/api/JoplinContentScripts.d.ts
+++ b/packages/app-cli/tests/support/plugins/multi_selection/api/JoplinContentScripts.d.ts
@@ -23,10 +23,18 @@ export default class JoplinContentScripts {
      * * [View the renderer demo plugin](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/content_script)
      * * [View the editor demo plugin](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/codemirror_content_script)
      *
+     * See also the [postMessage demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages)
+     *
      * @param type Defines how the script will be used. See the type definition for more information about each supported type.
      * @param id A unique ID for the content script.
      * @param scriptPath Must be a path relative to the plugin main script. For example, if your file content_script.js is next to your index.ts file, you would set `scriptPath` to `"./content_script.js`.
      */
     register(type: ContentScriptType, id: string, scriptPath: string): Promise<void>;
-    onMessage(id: string, callback: any): Promise<void>;
+    /**
+     * Listens to a messages sent from the content script using postMessage().
+     * See {@link ContentScriptType} for more information as well as the
+     * [postMessage
+     * demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages)
+     */
+    onMessage(contentScriptId: string, callback: any): Promise<void>;
 }
diff --git a/packages/app-cli/tests/support/plugins/multi_selection/api/types.ts b/packages/app-cli/tests/support/plugins/multi_selection/api/types.ts
index bc3219ac27..c8110fb650 100644
--- a/packages/app-cli/tests/support/plugins/multi_selection/api/types.ts
+++ b/packages/app-cli/tests/support/plugins/multi_selection/api/types.ts
@@ -458,7 +458,7 @@ export enum ContentScriptType {
 	 * });
 	 * ```
 	 *
-	 * See {@link JoplinContentScript.onMessage} for more details, as well as
+	 * See {@link JoplinContentScripts.onMessage} for more details, as well as
 	 * the [postMessage
 	 * demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages).
 	 *
@@ -557,7 +557,7 @@ export enum ContentScriptType {
 	 * });
 	 * ```
 	 *
-	 * See {@link JoplinContentScript.onMessage} for more details, as well as
+	 * See {@link JoplinContentScripts.onMessage} for more details, as well as
 	 * the [postMessage
 	 * demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages).
 	 *
diff --git a/packages/app-cli/tests/support/plugins/multi_selection/package.json b/packages/app-cli/tests/support/plugins/multi_selection/package.json
index 00ab0179db..ec3e6c1842 100644
--- a/packages/app-cli/tests/support/plugins/multi_selection/package.json
+++ b/packages/app-cli/tests/support/plugins/multi_selection/package.json
@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "description": "",
   "scripts": {
-    "dist": "webpack",
+    "dist": "webpack --joplin-plugin-config buildMain && webpack --joplin-plugin-config buildExtraScripts && webpack --joplin-plugin-config createArchive",
     "prepare": "npm run dist",
     "update": "npm install -g generator-joplin && yo joplin --update"
   },
@@ -22,6 +22,7 @@
     "typescript": "^3.9.3",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11",
-    "chalk": "^4.1.0"
+    "chalk": "^4.1.0",
+    "yargs": "^16.2.0"
   }
 }
\ No newline at end of file
diff --git a/packages/app-cli/tests/support/plugins/multi_selection/webpack.config.js b/packages/app-cli/tests/support/plugins/multi_selection/webpack.config.js
index 35538a5298..ec6c21ff26 100644
--- a/packages/app-cli/tests/support/plugins/multi_selection/webpack.config.js
+++ b/packages/app-cli/tests/support/plugins/multi_selection/webpack.config.js
@@ -33,10 +33,6 @@ const manifest = readManifest(manifestPath);
 const pluginArchiveFilePath = path.resolve(publishDir, `${manifest.id}.jpl`);
 const pluginInfoFilePath = path.resolve(publishDir, `${manifest.id}.json`);
 
-fs.removeSync(distDir);
-fs.removeSync(publishDir);
-fs.mkdirpSync(publishDir);
-
 function validatePackageJson() {
 	const content = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
 	if (!content.name || content.name.indexOf('joplin-plugin-') !== 0) {
@@ -109,6 +105,7 @@ function createPluginInfo(manifestPath, destPath, jplFilePath) {
 
 function onBuildCompleted() {
 	try {
+		fs.removeSync(path.resolve(publishDir, 'index.js'));
 		createPluginArchive(distDir, pluginArchiveFilePath);
 		createPluginInfo(manifestPath, pluginInfoFilePath, pluginArchiveFilePath);
 		validatePackageJson();
@@ -174,6 +171,16 @@ const extraScriptConfig = Object.assign({}, baseConfig, {
 	},
 });
 
+const createArchiveConfig = {
+	stats: 'errors-only',
+	entry: './dist/index.js',
+	output: {
+		filename: 'index.js',
+		path: publishDir,
+	},
+	plugins: [new WebpackOnBuildPlugin(onBuildCompleted)],
+};
+
 function resolveExtraScriptPath(name) {
 	const relativePath = `./src/${name}`;
 
@@ -196,8 +203,8 @@ function resolveExtraScriptPath(name) {
 	};
 }
 
-function addExtraScriptConfigs(baseConfig, userConfig) {
-	if (!userConfig.extraScripts.length) return baseConfig;
+function buildExtraScriptConfigs(userConfig) {
+	if (!userConfig.extraScripts.length) return [];
 
 	const output = [];
 
@@ -209,22 +216,55 @@ function addExtraScriptConfigs(baseConfig, userConfig) {
 		}));
 	}
 
-	return baseConfig.concat(output);
+	return output;
 }
 
-function addLastConfigStep(config) {
-	const lastConfig = config[config.length - 1];
-	if (!lastConfig.plugins) lastConfig.plugins = [];
-	lastConfig.plugins.push(new WebpackOnBuildPlugin(onBuildCompleted));
-	config[config.length - 1] = lastConfig;
-	return config;
+function main(processArgv) {
+	const yargs = require('yargs/yargs');
+	const argv = yargs(processArgv).argv;
+
+	const configName = argv['joplin-plugin-config'];
+	if (!configName) throw new Error('A config file must be specified via the --joplin-plugin-config flag');
+
+	// Webpack configurations run in parallel, while we need them to run in
+	// sequence, and to do that it seems the only way is to run webpack multiple
+	// times, with different config each time.
+
+	const configs = {
+		// Builds the main src/index.ts and copy the extra content from /src to
+		// /dist including scripts, CSS and any other asset.
+		buildMain: pluginConfig,
+
+		// Builds the extra scripts as defined in plugin.config.json. When doing
+		// so, some JavaScript files that were copied in the previous might be
+		// overwritten here by the compiled version. This is by design. The
+		// result is that JS files that don't need compilation, are simply
+		// copied to /dist, while those that do need it are correctly compiled.
+		buildExtraScripts: buildExtraScriptConfigs(userConfig),
+
+		// Ths config is for creating the .jpl, which is done via the plugin, so
+		// it doesn't actually need an entry and output, however webpack won't
+		// run without this. So we give it an entry that we know is going to
+		// exist and output in the publish dir. Then the plugin will delete this
+		// temporary file before packaging the plugin.
+		createArchive: createArchiveConfig,
+	};
+
+	// If we are running the first config step, we clean up and create the build
+	// directories.
+	if (configName === 'buildMain') {
+		fs.removeSync(distDir);
+		fs.removeSync(publishDir);
+		fs.mkdirpSync(publishDir);
+	}
+
+	return configs[configName];
 }
 
-let exportedConfigs = [pluginConfig];
+let exportedConfigs = [];
 
 try {
-	exportedConfigs = addExtraScriptConfigs(exportedConfigs, userConfig);
-	exportedConfigs = addLastConfigStep(exportedConfigs);
+	exportedConfigs = main(process.argv);
 } catch (error) {
 	console.error(chalk.red(error.message));
 	process.exit(1);
diff --git a/packages/app-cli/tests/support/plugins/post_messages/.gitignore b/packages/app-cli/tests/support/plugins/post_messages/.gitignore
index 6b8be5aeb8..622f443408 100644
--- a/packages/app-cli/tests/support/plugins/post_messages/.gitignore
+++ b/packages/app-cli/tests/support/plugins/post_messages/.gitignore
@@ -1,6 +1,3 @@
 dist/
 node_modules/
 publish/
-
-
-
diff --git a/packages/app-cli/tests/support/plugins/post_messages/.npmignore b/packages/app-cli/tests/support/plugins/post_messages/.npmignore
index 0b4d47862c..80f70d77e9 100644
--- a/packages/app-cli/tests/support/plugins/post_messages/.npmignore
+++ b/packages/app-cli/tests/support/plugins/post_messages/.npmignore
@@ -6,6 +6,3 @@
 /dist
 tsconfig.json
 webpack.config.js
-
-
-
diff --git a/packages/app-cli/tests/support/plugins/post_messages/api/JoplinContentScripts.d.ts b/packages/app-cli/tests/support/plugins/post_messages/api/JoplinContentScripts.d.ts
index 09ad5178a4..145e9d145a 100644
--- a/packages/app-cli/tests/support/plugins/post_messages/api/JoplinContentScripts.d.ts
+++ b/packages/app-cli/tests/support/plugins/post_messages/api/JoplinContentScripts.d.ts
@@ -23,10 +23,18 @@ export default class JoplinContentScripts {
      * * [View the renderer demo plugin](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/content_script)
      * * [View the editor demo plugin](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/codemirror_content_script)
      *
+     * See also the [postMessage demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages)
+     *
      * @param type Defines how the script will be used. See the type definition for more information about each supported type.
      * @param id A unique ID for the content script.
      * @param scriptPath Must be a path relative to the plugin main script. For example, if your file content_script.js is next to your index.ts file, you would set `scriptPath` to `"./content_script.js`.
      */
     register(type: ContentScriptType, id: string, scriptPath: string): Promise<void>;
-    onMessage(id: string, callback: any): Promise<void>;
+    /**
+     * Listens to a messages sent from the content script using postMessage().
+     * See {@link ContentScriptType} for more information as well as the
+     * [postMessage
+     * demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages)
+     */
+    onMessage(contentScriptId: string, callback: any): Promise<void>;
 }
diff --git a/packages/app-cli/tests/support/plugins/post_messages/api/types.ts b/packages/app-cli/tests/support/plugins/post_messages/api/types.ts
index bc3219ac27..c8110fb650 100644
--- a/packages/app-cli/tests/support/plugins/post_messages/api/types.ts
+++ b/packages/app-cli/tests/support/plugins/post_messages/api/types.ts
@@ -458,7 +458,7 @@ export enum ContentScriptType {
 	 * });
 	 * ```
 	 *
-	 * See {@link JoplinContentScript.onMessage} for more details, as well as
+	 * See {@link JoplinContentScripts.onMessage} for more details, as well as
 	 * the [postMessage
 	 * demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages).
 	 *
@@ -557,7 +557,7 @@ export enum ContentScriptType {
 	 * });
 	 * ```
 	 *
-	 * See {@link JoplinContentScript.onMessage} for more details, as well as
+	 * See {@link JoplinContentScripts.onMessage} for more details, as well as
 	 * the [postMessage
 	 * demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages).
 	 *
diff --git a/packages/app-cli/tests/support/plugins/post_messages/package.json b/packages/app-cli/tests/support/plugins/post_messages/package.json
index 8d65acf5cb..047156221d 100644
--- a/packages/app-cli/tests/support/plugins/post_messages/package.json
+++ b/packages/app-cli/tests/support/plugins/post_messages/package.json
@@ -2,7 +2,7 @@
   "name": "joplin-plugin-postmessage-demo",
   "version": "1.0.0",
   "scripts": {
-    "dist": "webpack",
+    "dist": "webpack --joplin-plugin-config buildMain && webpack --joplin-plugin-config buildExtraScripts && webpack --joplin-plugin-config createArchive",
     "prepare": "npm run dist",
     "update": "npm install -g generator-joplin && yo joplin --update"
   },
@@ -21,6 +21,7 @@
     "ts-loader": "^7.0.5",
     "typescript": "^3.9.3",
     "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11"
+    "webpack-cli": "^3.3.11",
+    "yargs": "^16.2.0"
   }
 }
\ No newline at end of file
diff --git a/packages/app-cli/tests/support/plugins/post_messages/webpack.config.js b/packages/app-cli/tests/support/plugins/post_messages/webpack.config.js
index 35538a5298..ec6c21ff26 100644
--- a/packages/app-cli/tests/support/plugins/post_messages/webpack.config.js
+++ b/packages/app-cli/tests/support/plugins/post_messages/webpack.config.js
@@ -33,10 +33,6 @@ const manifest = readManifest(manifestPath);
 const pluginArchiveFilePath = path.resolve(publishDir, `${manifest.id}.jpl`);
 const pluginInfoFilePath = path.resolve(publishDir, `${manifest.id}.json`);
 
-fs.removeSync(distDir);
-fs.removeSync(publishDir);
-fs.mkdirpSync(publishDir);
-
 function validatePackageJson() {
 	const content = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
 	if (!content.name || content.name.indexOf('joplin-plugin-') !== 0) {
@@ -109,6 +105,7 @@ function createPluginInfo(manifestPath, destPath, jplFilePath) {
 
 function onBuildCompleted() {
 	try {
+		fs.removeSync(path.resolve(publishDir, 'index.js'));
 		createPluginArchive(distDir, pluginArchiveFilePath);
 		createPluginInfo(manifestPath, pluginInfoFilePath, pluginArchiveFilePath);
 		validatePackageJson();
@@ -174,6 +171,16 @@ const extraScriptConfig = Object.assign({}, baseConfig, {
 	},
 });
 
+const createArchiveConfig = {
+	stats: 'errors-only',
+	entry: './dist/index.js',
+	output: {
+		filename: 'index.js',
+		path: publishDir,
+	},
+	plugins: [new WebpackOnBuildPlugin(onBuildCompleted)],
+};
+
 function resolveExtraScriptPath(name) {
 	const relativePath = `./src/${name}`;
 
@@ -196,8 +203,8 @@ function resolveExtraScriptPath(name) {
 	};
 }
 
-function addExtraScriptConfigs(baseConfig, userConfig) {
-	if (!userConfig.extraScripts.length) return baseConfig;
+function buildExtraScriptConfigs(userConfig) {
+	if (!userConfig.extraScripts.length) return [];
 
 	const output = [];
 
@@ -209,22 +216,55 @@ function addExtraScriptConfigs(baseConfig, userConfig) {
 		}));
 	}
 
-	return baseConfig.concat(output);
+	return output;
 }
 
-function addLastConfigStep(config) {
-	const lastConfig = config[config.length - 1];
-	if (!lastConfig.plugins) lastConfig.plugins = [];
-	lastConfig.plugins.push(new WebpackOnBuildPlugin(onBuildCompleted));
-	config[config.length - 1] = lastConfig;
-	return config;
+function main(processArgv) {
+	const yargs = require('yargs/yargs');
+	const argv = yargs(processArgv).argv;
+
+	const configName = argv['joplin-plugin-config'];
+	if (!configName) throw new Error('A config file must be specified via the --joplin-plugin-config flag');
+
+	// Webpack configurations run in parallel, while we need them to run in
+	// sequence, and to do that it seems the only way is to run webpack multiple
+	// times, with different config each time.
+
+	const configs = {
+		// Builds the main src/index.ts and copy the extra content from /src to
+		// /dist including scripts, CSS and any other asset.
+		buildMain: pluginConfig,
+
+		// Builds the extra scripts as defined in plugin.config.json. When doing
+		// so, some JavaScript files that were copied in the previous might be
+		// overwritten here by the compiled version. This is by design. The
+		// result is that JS files that don't need compilation, are simply
+		// copied to /dist, while those that do need it are correctly compiled.
+		buildExtraScripts: buildExtraScriptConfigs(userConfig),
+
+		// Ths config is for creating the .jpl, which is done via the plugin, so
+		// it doesn't actually need an entry and output, however webpack won't
+		// run without this. So we give it an entry that we know is going to
+		// exist and output in the publish dir. Then the plugin will delete this
+		// temporary file before packaging the plugin.
+		createArchive: createArchiveConfig,
+	};
+
+	// If we are running the first config step, we clean up and create the build
+	// directories.
+	if (configName === 'buildMain') {
+		fs.removeSync(distDir);
+		fs.removeSync(publishDir);
+		fs.mkdirpSync(publishDir);
+	}
+
+	return configs[configName];
 }
 
-let exportedConfigs = [pluginConfig];
+let exportedConfigs = [];
 
 try {
-	exportedConfigs = addExtraScriptConfigs(exportedConfigs, userConfig);
-	exportedConfigs = addLastConfigStep(exportedConfigs);
+	exportedConfigs = main(process.argv);
 } catch (error) {
 	console.error(chalk.red(error.message));
 	process.exit(1);
diff --git a/packages/app-cli/tests/support/plugins/register_command/.gitignore b/packages/app-cli/tests/support/plugins/register_command/.gitignore
index 7a4fea3fe7..622f443408 100644
--- a/packages/app-cli/tests/support/plugins/register_command/.gitignore
+++ b/packages/app-cli/tests/support/plugins/register_command/.gitignore
@@ -1,7 +1,3 @@
 dist/
 node_modules/
 publish/
-
-
-
-
diff --git a/packages/app-cli/tests/support/plugins/register_command/.npmignore b/packages/app-cli/tests/support/plugins/register_command/.npmignore
index 3f18d39bd0..80f70d77e9 100644
--- a/packages/app-cli/tests/support/plugins/register_command/.npmignore
+++ b/packages/app-cli/tests/support/plugins/register_command/.npmignore
@@ -6,7 +6,3 @@
 /dist
 tsconfig.json
 webpack.config.js
-
-
-
-
diff --git a/packages/app-cli/tests/support/plugins/register_command/api/JoplinContentScripts.d.ts b/packages/app-cli/tests/support/plugins/register_command/api/JoplinContentScripts.d.ts
index 09ad5178a4..145e9d145a 100644
--- a/packages/app-cli/tests/support/plugins/register_command/api/JoplinContentScripts.d.ts
+++ b/packages/app-cli/tests/support/plugins/register_command/api/JoplinContentScripts.d.ts
@@ -23,10 +23,18 @@ export default class JoplinContentScripts {
      * * [View the renderer demo plugin](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/content_script)
      * * [View the editor demo plugin](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/codemirror_content_script)
      *
+     * See also the [postMessage demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages)
+     *
      * @param type Defines how the script will be used. See the type definition for more information about each supported type.
      * @param id A unique ID for the content script.
      * @param scriptPath Must be a path relative to the plugin main script. For example, if your file content_script.js is next to your index.ts file, you would set `scriptPath` to `"./content_script.js`.
      */
     register(type: ContentScriptType, id: string, scriptPath: string): Promise<void>;
-    onMessage(id: string, callback: any): Promise<void>;
+    /**
+     * Listens to a messages sent from the content script using postMessage().
+     * See {@link ContentScriptType} for more information as well as the
+     * [postMessage
+     * demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages)
+     */
+    onMessage(contentScriptId: string, callback: any): Promise<void>;
 }
diff --git a/packages/app-cli/tests/support/plugins/register_command/api/types.ts b/packages/app-cli/tests/support/plugins/register_command/api/types.ts
index bc3219ac27..c8110fb650 100644
--- a/packages/app-cli/tests/support/plugins/register_command/api/types.ts
+++ b/packages/app-cli/tests/support/plugins/register_command/api/types.ts
@@ -458,7 +458,7 @@ export enum ContentScriptType {
 	 * });
 	 * ```
 	 *
-	 * See {@link JoplinContentScript.onMessage} for more details, as well as
+	 * See {@link JoplinContentScripts.onMessage} for more details, as well as
 	 * the [postMessage
 	 * demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages).
 	 *
@@ -557,7 +557,7 @@ export enum ContentScriptType {
 	 * });
 	 * ```
 	 *
-	 * See {@link JoplinContentScript.onMessage} for more details, as well as
+	 * See {@link JoplinContentScripts.onMessage} for more details, as well as
 	 * the [postMessage
 	 * demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages).
 	 *
diff --git a/packages/app-cli/tests/support/plugins/register_command/package.json b/packages/app-cli/tests/support/plugins/register_command/package.json
index 00ab0179db..ec3e6c1842 100644
--- a/packages/app-cli/tests/support/plugins/register_command/package.json
+++ b/packages/app-cli/tests/support/plugins/register_command/package.json
@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "description": "",
   "scripts": {
-    "dist": "webpack",
+    "dist": "webpack --joplin-plugin-config buildMain && webpack --joplin-plugin-config buildExtraScripts && webpack --joplin-plugin-config createArchive",
     "prepare": "npm run dist",
     "update": "npm install -g generator-joplin && yo joplin --update"
   },
@@ -22,6 +22,7 @@
     "typescript": "^3.9.3",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11",
-    "chalk": "^4.1.0"
+    "chalk": "^4.1.0",
+    "yargs": "^16.2.0"
   }
 }
\ No newline at end of file
diff --git a/packages/app-cli/tests/support/plugins/register_command/webpack.config.js b/packages/app-cli/tests/support/plugins/register_command/webpack.config.js
index 35538a5298..ec6c21ff26 100644
--- a/packages/app-cli/tests/support/plugins/register_command/webpack.config.js
+++ b/packages/app-cli/tests/support/plugins/register_command/webpack.config.js
@@ -33,10 +33,6 @@ const manifest = readManifest(manifestPath);
 const pluginArchiveFilePath = path.resolve(publishDir, `${manifest.id}.jpl`);
 const pluginInfoFilePath = path.resolve(publishDir, `${manifest.id}.json`);
 
-fs.removeSync(distDir);
-fs.removeSync(publishDir);
-fs.mkdirpSync(publishDir);
-
 function validatePackageJson() {
 	const content = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
 	if (!content.name || content.name.indexOf('joplin-plugin-') !== 0) {
@@ -109,6 +105,7 @@ function createPluginInfo(manifestPath, destPath, jplFilePath) {
 
 function onBuildCompleted() {
 	try {
+		fs.removeSync(path.resolve(publishDir, 'index.js'));
 		createPluginArchive(distDir, pluginArchiveFilePath);
 		createPluginInfo(manifestPath, pluginInfoFilePath, pluginArchiveFilePath);
 		validatePackageJson();
@@ -174,6 +171,16 @@ const extraScriptConfig = Object.assign({}, baseConfig, {
 	},
 });
 
+const createArchiveConfig = {
+	stats: 'errors-only',
+	entry: './dist/index.js',
+	output: {
+		filename: 'index.js',
+		path: publishDir,
+	},
+	plugins: [new WebpackOnBuildPlugin(onBuildCompleted)],
+};
+
 function resolveExtraScriptPath(name) {
 	const relativePath = `./src/${name}`;
 
@@ -196,8 +203,8 @@ function resolveExtraScriptPath(name) {
 	};
 }
 
-function addExtraScriptConfigs(baseConfig, userConfig) {
-	if (!userConfig.extraScripts.length) return baseConfig;
+function buildExtraScriptConfigs(userConfig) {
+	if (!userConfig.extraScripts.length) return [];
 
 	const output = [];
 
@@ -209,22 +216,55 @@ function addExtraScriptConfigs(baseConfig, userConfig) {
 		}));
 	}
 
-	return baseConfig.concat(output);
+	return output;
 }
 
-function addLastConfigStep(config) {
-	const lastConfig = config[config.length - 1];
-	if (!lastConfig.plugins) lastConfig.plugins = [];
-	lastConfig.plugins.push(new WebpackOnBuildPlugin(onBuildCompleted));
-	config[config.length - 1] = lastConfig;
-	return config;
+function main(processArgv) {
+	const yargs = require('yargs/yargs');
+	const argv = yargs(processArgv).argv;
+
+	const configName = argv['joplin-plugin-config'];
+	if (!configName) throw new Error('A config file must be specified via the --joplin-plugin-config flag');
+
+	// Webpack configurations run in parallel, while we need them to run in
+	// sequence, and to do that it seems the only way is to run webpack multiple
+	// times, with different config each time.
+
+	const configs = {
+		// Builds the main src/index.ts and copy the extra content from /src to
+		// /dist including scripts, CSS and any other asset.
+		buildMain: pluginConfig,
+
+		// Builds the extra scripts as defined in plugin.config.json. When doing
+		// so, some JavaScript files that were copied in the previous might be
+		// overwritten here by the compiled version. This is by design. The
+		// result is that JS files that don't need compilation, are simply
+		// copied to /dist, while those that do need it are correctly compiled.
+		buildExtraScripts: buildExtraScriptConfigs(userConfig),
+
+		// Ths config is for creating the .jpl, which is done via the plugin, so
+		// it doesn't actually need an entry and output, however webpack won't
+		// run without this. So we give it an entry that we know is going to
+		// exist and output in the publish dir. Then the plugin will delete this
+		// temporary file before packaging the plugin.
+		createArchive: createArchiveConfig,
+	};
+
+	// If we are running the first config step, we clean up and create the build
+	// directories.
+	if (configName === 'buildMain') {
+		fs.removeSync(distDir);
+		fs.removeSync(publishDir);
+		fs.mkdirpSync(publishDir);
+	}
+
+	return configs[configName];
 }
 
-let exportedConfigs = [pluginConfig];
+let exportedConfigs = [];
 
 try {
-	exportedConfigs = addExtraScriptConfigs(exportedConfigs, userConfig);
-	exportedConfigs = addLastConfigStep(exportedConfigs);
+	exportedConfigs = main(process.argv);
 } catch (error) {
 	console.error(chalk.red(error.message));
 	process.exit(1);
diff --git a/packages/app-cli/tests/support/plugins/selected_text/.gitignore b/packages/app-cli/tests/support/plugins/selected_text/.gitignore
index 7a4fea3fe7..622f443408 100644
--- a/packages/app-cli/tests/support/plugins/selected_text/.gitignore
+++ b/packages/app-cli/tests/support/plugins/selected_text/.gitignore
@@ -1,7 +1,3 @@
 dist/
 node_modules/
 publish/
-
-
-
-
diff --git a/packages/app-cli/tests/support/plugins/selected_text/.npmignore b/packages/app-cli/tests/support/plugins/selected_text/.npmignore
index 3f18d39bd0..80f70d77e9 100644
--- a/packages/app-cli/tests/support/plugins/selected_text/.npmignore
+++ b/packages/app-cli/tests/support/plugins/selected_text/.npmignore
@@ -6,7 +6,3 @@
 /dist
 tsconfig.json
 webpack.config.js
-
-
-
-
diff --git a/packages/app-cli/tests/support/plugins/selected_text/api/JoplinContentScripts.d.ts b/packages/app-cli/tests/support/plugins/selected_text/api/JoplinContentScripts.d.ts
index 09ad5178a4..145e9d145a 100644
--- a/packages/app-cli/tests/support/plugins/selected_text/api/JoplinContentScripts.d.ts
+++ b/packages/app-cli/tests/support/plugins/selected_text/api/JoplinContentScripts.d.ts
@@ -23,10 +23,18 @@ export default class JoplinContentScripts {
      * * [View the renderer demo plugin](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/content_script)
      * * [View the editor demo plugin](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/codemirror_content_script)
      *
+     * See also the [postMessage demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages)
+     *
      * @param type Defines how the script will be used. See the type definition for more information about each supported type.
      * @param id A unique ID for the content script.
      * @param scriptPath Must be a path relative to the plugin main script. For example, if your file content_script.js is next to your index.ts file, you would set `scriptPath` to `"./content_script.js`.
      */
     register(type: ContentScriptType, id: string, scriptPath: string): Promise<void>;
-    onMessage(id: string, callback: any): Promise<void>;
+    /**
+     * Listens to a messages sent from the content script using postMessage().
+     * See {@link ContentScriptType} for more information as well as the
+     * [postMessage
+     * demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages)
+     */
+    onMessage(contentScriptId: string, callback: any): Promise<void>;
 }
diff --git a/packages/app-cli/tests/support/plugins/selected_text/api/types.ts b/packages/app-cli/tests/support/plugins/selected_text/api/types.ts
index bc3219ac27..c8110fb650 100644
--- a/packages/app-cli/tests/support/plugins/selected_text/api/types.ts
+++ b/packages/app-cli/tests/support/plugins/selected_text/api/types.ts
@@ -458,7 +458,7 @@ export enum ContentScriptType {
 	 * });
 	 * ```
 	 *
-	 * See {@link JoplinContentScript.onMessage} for more details, as well as
+	 * See {@link JoplinContentScripts.onMessage} for more details, as well as
 	 * the [postMessage
 	 * demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages).
 	 *
@@ -557,7 +557,7 @@ export enum ContentScriptType {
 	 * });
 	 * ```
 	 *
-	 * See {@link JoplinContentScript.onMessage} for more details, as well as
+	 * See {@link JoplinContentScripts.onMessage} for more details, as well as
 	 * the [postMessage
 	 * demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages).
 	 *
diff --git a/packages/app-cli/tests/support/plugins/selected_text/package.json b/packages/app-cli/tests/support/plugins/selected_text/package.json
index 00ab0179db..ec3e6c1842 100644
--- a/packages/app-cli/tests/support/plugins/selected_text/package.json
+++ b/packages/app-cli/tests/support/plugins/selected_text/package.json
@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "description": "",
   "scripts": {
-    "dist": "webpack",
+    "dist": "webpack --joplin-plugin-config buildMain && webpack --joplin-plugin-config buildExtraScripts && webpack --joplin-plugin-config createArchive",
     "prepare": "npm run dist",
     "update": "npm install -g generator-joplin && yo joplin --update"
   },
@@ -22,6 +22,7 @@
     "typescript": "^3.9.3",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11",
-    "chalk": "^4.1.0"
+    "chalk": "^4.1.0",
+    "yargs": "^16.2.0"
   }
 }
\ No newline at end of file
diff --git a/packages/app-cli/tests/support/plugins/selected_text/webpack.config.js b/packages/app-cli/tests/support/plugins/selected_text/webpack.config.js
index 35538a5298..ec6c21ff26 100644
--- a/packages/app-cli/tests/support/plugins/selected_text/webpack.config.js
+++ b/packages/app-cli/tests/support/plugins/selected_text/webpack.config.js
@@ -33,10 +33,6 @@ const manifest = readManifest(manifestPath);
 const pluginArchiveFilePath = path.resolve(publishDir, `${manifest.id}.jpl`);
 const pluginInfoFilePath = path.resolve(publishDir, `${manifest.id}.json`);
 
-fs.removeSync(distDir);
-fs.removeSync(publishDir);
-fs.mkdirpSync(publishDir);
-
 function validatePackageJson() {
 	const content = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
 	if (!content.name || content.name.indexOf('joplin-plugin-') !== 0) {
@@ -109,6 +105,7 @@ function createPluginInfo(manifestPath, destPath, jplFilePath) {
 
 function onBuildCompleted() {
 	try {
+		fs.removeSync(path.resolve(publishDir, 'index.js'));
 		createPluginArchive(distDir, pluginArchiveFilePath);
 		createPluginInfo(manifestPath, pluginInfoFilePath, pluginArchiveFilePath);
 		validatePackageJson();
@@ -174,6 +171,16 @@ const extraScriptConfig = Object.assign({}, baseConfig, {
 	},
 });
 
+const createArchiveConfig = {
+	stats: 'errors-only',
+	entry: './dist/index.js',
+	output: {
+		filename: 'index.js',
+		path: publishDir,
+	},
+	plugins: [new WebpackOnBuildPlugin(onBuildCompleted)],
+};
+
 function resolveExtraScriptPath(name) {
 	const relativePath = `./src/${name}`;
 
@@ -196,8 +203,8 @@ function resolveExtraScriptPath(name) {
 	};
 }
 
-function addExtraScriptConfigs(baseConfig, userConfig) {
-	if (!userConfig.extraScripts.length) return baseConfig;
+function buildExtraScriptConfigs(userConfig) {
+	if (!userConfig.extraScripts.length) return [];
 
 	const output = [];
 
@@ -209,22 +216,55 @@ function addExtraScriptConfigs(baseConfig, userConfig) {
 		}));
 	}
 
-	return baseConfig.concat(output);
+	return output;
 }
 
-function addLastConfigStep(config) {
-	const lastConfig = config[config.length - 1];
-	if (!lastConfig.plugins) lastConfig.plugins = [];
-	lastConfig.plugins.push(new WebpackOnBuildPlugin(onBuildCompleted));
-	config[config.length - 1] = lastConfig;
-	return config;
+function main(processArgv) {
+	const yargs = require('yargs/yargs');
+	const argv = yargs(processArgv).argv;
+
+	const configName = argv['joplin-plugin-config'];
+	if (!configName) throw new Error('A config file must be specified via the --joplin-plugin-config flag');
+
+	// Webpack configurations run in parallel, while we need them to run in
+	// sequence, and to do that it seems the only way is to run webpack multiple
+	// times, with different config each time.
+
+	const configs = {
+		// Builds the main src/index.ts and copy the extra content from /src to
+		// /dist including scripts, CSS and any other asset.
+		buildMain: pluginConfig,
+
+		// Builds the extra scripts as defined in plugin.config.json. When doing
+		// so, some JavaScript files that were copied in the previous might be
+		// overwritten here by the compiled version. This is by design. The
+		// result is that JS files that don't need compilation, are simply
+		// copied to /dist, while those that do need it are correctly compiled.
+		buildExtraScripts: buildExtraScriptConfigs(userConfig),
+
+		// Ths config is for creating the .jpl, which is done via the plugin, so
+		// it doesn't actually need an entry and output, however webpack won't
+		// run without this. So we give it an entry that we know is going to
+		// exist and output in the publish dir. Then the plugin will delete this
+		// temporary file before packaging the plugin.
+		createArchive: createArchiveConfig,
+	};
+
+	// If we are running the first config step, we clean up and create the build
+	// directories.
+	if (configName === 'buildMain') {
+		fs.removeSync(distDir);
+		fs.removeSync(publishDir);
+		fs.mkdirpSync(publishDir);
+	}
+
+	return configs[configName];
 }
 
-let exportedConfigs = [pluginConfig];
+let exportedConfigs = [];
 
 try {
-	exportedConfigs = addExtraScriptConfigs(exportedConfigs, userConfig);
-	exportedConfigs = addLastConfigStep(exportedConfigs);
+	exportedConfigs = main(process.argv);
 } catch (error) {
 	console.error(chalk.red(error.message));
 	process.exit(1);
diff --git a/packages/app-cli/tests/support/plugins/settings/.gitignore b/packages/app-cli/tests/support/plugins/settings/.gitignore
index 7a4fea3fe7..622f443408 100644
--- a/packages/app-cli/tests/support/plugins/settings/.gitignore
+++ b/packages/app-cli/tests/support/plugins/settings/.gitignore
@@ -1,7 +1,3 @@
 dist/
 node_modules/
 publish/
-
-
-
-
diff --git a/packages/app-cli/tests/support/plugins/settings/.npmignore b/packages/app-cli/tests/support/plugins/settings/.npmignore
index 3f18d39bd0..80f70d77e9 100644
--- a/packages/app-cli/tests/support/plugins/settings/.npmignore
+++ b/packages/app-cli/tests/support/plugins/settings/.npmignore
@@ -6,7 +6,3 @@
 /dist
 tsconfig.json
 webpack.config.js
-
-
-
-
diff --git a/packages/app-cli/tests/support/plugins/settings/api/JoplinContentScripts.d.ts b/packages/app-cli/tests/support/plugins/settings/api/JoplinContentScripts.d.ts
index 09ad5178a4..145e9d145a 100644
--- a/packages/app-cli/tests/support/plugins/settings/api/JoplinContentScripts.d.ts
+++ b/packages/app-cli/tests/support/plugins/settings/api/JoplinContentScripts.d.ts
@@ -23,10 +23,18 @@ export default class JoplinContentScripts {
      * * [View the renderer demo plugin](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/content_script)
      * * [View the editor demo plugin](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/codemirror_content_script)
      *
+     * See also the [postMessage demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages)
+     *
      * @param type Defines how the script will be used. See the type definition for more information about each supported type.
      * @param id A unique ID for the content script.
      * @param scriptPath Must be a path relative to the plugin main script. For example, if your file content_script.js is next to your index.ts file, you would set `scriptPath` to `"./content_script.js`.
      */
     register(type: ContentScriptType, id: string, scriptPath: string): Promise<void>;
-    onMessage(id: string, callback: any): Promise<void>;
+    /**
+     * Listens to a messages sent from the content script using postMessage().
+     * See {@link ContentScriptType} for more information as well as the
+     * [postMessage
+     * demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages)
+     */
+    onMessage(contentScriptId: string, callback: any): Promise<void>;
 }
diff --git a/packages/app-cli/tests/support/plugins/settings/api/types.ts b/packages/app-cli/tests/support/plugins/settings/api/types.ts
index bc3219ac27..c8110fb650 100644
--- a/packages/app-cli/tests/support/plugins/settings/api/types.ts
+++ b/packages/app-cli/tests/support/plugins/settings/api/types.ts
@@ -458,7 +458,7 @@ export enum ContentScriptType {
 	 * });
 	 * ```
 	 *
-	 * See {@link JoplinContentScript.onMessage} for more details, as well as
+	 * See {@link JoplinContentScripts.onMessage} for more details, as well as
 	 * the [postMessage
 	 * demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages).
 	 *
@@ -557,7 +557,7 @@ export enum ContentScriptType {
 	 * });
 	 * ```
 	 *
-	 * See {@link JoplinContentScript.onMessage} for more details, as well as
+	 * See {@link JoplinContentScripts.onMessage} for more details, as well as
 	 * the [postMessage
 	 * demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages).
 	 *
diff --git a/packages/app-cli/tests/support/plugins/settings/package.json b/packages/app-cli/tests/support/plugins/settings/package.json
index 00ab0179db..ec3e6c1842 100644
--- a/packages/app-cli/tests/support/plugins/settings/package.json
+++ b/packages/app-cli/tests/support/plugins/settings/package.json
@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "description": "",
   "scripts": {
-    "dist": "webpack",
+    "dist": "webpack --joplin-plugin-config buildMain && webpack --joplin-plugin-config buildExtraScripts && webpack --joplin-plugin-config createArchive",
     "prepare": "npm run dist",
     "update": "npm install -g generator-joplin && yo joplin --update"
   },
@@ -22,6 +22,7 @@
     "typescript": "^3.9.3",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11",
-    "chalk": "^4.1.0"
+    "chalk": "^4.1.0",
+    "yargs": "^16.2.0"
   }
 }
\ No newline at end of file
diff --git a/packages/app-cli/tests/support/plugins/settings/webpack.config.js b/packages/app-cli/tests/support/plugins/settings/webpack.config.js
index 35538a5298..ec6c21ff26 100644
--- a/packages/app-cli/tests/support/plugins/settings/webpack.config.js
+++ b/packages/app-cli/tests/support/plugins/settings/webpack.config.js
@@ -33,10 +33,6 @@ const manifest = readManifest(manifestPath);
 const pluginArchiveFilePath = path.resolve(publishDir, `${manifest.id}.jpl`);
 const pluginInfoFilePath = path.resolve(publishDir, `${manifest.id}.json`);
 
-fs.removeSync(distDir);
-fs.removeSync(publishDir);
-fs.mkdirpSync(publishDir);
-
 function validatePackageJson() {
 	const content = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
 	if (!content.name || content.name.indexOf('joplin-plugin-') !== 0) {
@@ -109,6 +105,7 @@ function createPluginInfo(manifestPath, destPath, jplFilePath) {
 
 function onBuildCompleted() {
 	try {
+		fs.removeSync(path.resolve(publishDir, 'index.js'));
 		createPluginArchive(distDir, pluginArchiveFilePath);
 		createPluginInfo(manifestPath, pluginInfoFilePath, pluginArchiveFilePath);
 		validatePackageJson();
@@ -174,6 +171,16 @@ const extraScriptConfig = Object.assign({}, baseConfig, {
 	},
 });
 
+const createArchiveConfig = {
+	stats: 'errors-only',
+	entry: './dist/index.js',
+	output: {
+		filename: 'index.js',
+		path: publishDir,
+	},
+	plugins: [new WebpackOnBuildPlugin(onBuildCompleted)],
+};
+
 function resolveExtraScriptPath(name) {
 	const relativePath = `./src/${name}`;
 
@@ -196,8 +203,8 @@ function resolveExtraScriptPath(name) {
 	};
 }
 
-function addExtraScriptConfigs(baseConfig, userConfig) {
-	if (!userConfig.extraScripts.length) return baseConfig;
+function buildExtraScriptConfigs(userConfig) {
+	if (!userConfig.extraScripts.length) return [];
 
 	const output = [];
 
@@ -209,22 +216,55 @@ function addExtraScriptConfigs(baseConfig, userConfig) {
 		}));
 	}
 
-	return baseConfig.concat(output);
+	return output;
 }
 
-function addLastConfigStep(config) {
-	const lastConfig = config[config.length - 1];
-	if (!lastConfig.plugins) lastConfig.plugins = [];
-	lastConfig.plugins.push(new WebpackOnBuildPlugin(onBuildCompleted));
-	config[config.length - 1] = lastConfig;
-	return config;
+function main(processArgv) {
+	const yargs = require('yargs/yargs');
+	const argv = yargs(processArgv).argv;
+
+	const configName = argv['joplin-plugin-config'];
+	if (!configName) throw new Error('A config file must be specified via the --joplin-plugin-config flag');
+
+	// Webpack configurations run in parallel, while we need them to run in
+	// sequence, and to do that it seems the only way is to run webpack multiple
+	// times, with different config each time.
+
+	const configs = {
+		// Builds the main src/index.ts and copy the extra content from /src to
+		// /dist including scripts, CSS and any other asset.
+		buildMain: pluginConfig,
+
+		// Builds the extra scripts as defined in plugin.config.json. When doing
+		// so, some JavaScript files that were copied in the previous might be
+		// overwritten here by the compiled version. This is by design. The
+		// result is that JS files that don't need compilation, are simply
+		// copied to /dist, while those that do need it are correctly compiled.
+		buildExtraScripts: buildExtraScriptConfigs(userConfig),
+
+		// Ths config is for creating the .jpl, which is done via the plugin, so
+		// it doesn't actually need an entry and output, however webpack won't
+		// run without this. So we give it an entry that we know is going to
+		// exist and output in the publish dir. Then the plugin will delete this
+		// temporary file before packaging the plugin.
+		createArchive: createArchiveConfig,
+	};
+
+	// If we are running the first config step, we clean up and create the build
+	// directories.
+	if (configName === 'buildMain') {
+		fs.removeSync(distDir);
+		fs.removeSync(publishDir);
+		fs.mkdirpSync(publishDir);
+	}
+
+	return configs[configName];
 }
 
-let exportedConfigs = [pluginConfig];
+let exportedConfigs = [];
 
 try {
-	exportedConfigs = addExtraScriptConfigs(exportedConfigs, userConfig);
-	exportedConfigs = addLastConfigStep(exportedConfigs);
+	exportedConfigs = main(process.argv);
 } catch (error) {
 	console.error(chalk.red(error.message));
 	process.exit(1);
diff --git a/packages/app-cli/tests/support/plugins/toc/.gitignore b/packages/app-cli/tests/support/plugins/toc/.gitignore
index 7a4fea3fe7..622f443408 100644
--- a/packages/app-cli/tests/support/plugins/toc/.gitignore
+++ b/packages/app-cli/tests/support/plugins/toc/.gitignore
@@ -1,7 +1,3 @@
 dist/
 node_modules/
 publish/
-
-
-
-
diff --git a/packages/app-cli/tests/support/plugins/toc/.npmignore b/packages/app-cli/tests/support/plugins/toc/.npmignore
index 3f18d39bd0..80f70d77e9 100644
--- a/packages/app-cli/tests/support/plugins/toc/.npmignore
+++ b/packages/app-cli/tests/support/plugins/toc/.npmignore
@@ -6,7 +6,3 @@
 /dist
 tsconfig.json
 webpack.config.js
-
-
-
-
diff --git a/packages/app-cli/tests/support/plugins/toc/api/JoplinContentScripts.d.ts b/packages/app-cli/tests/support/plugins/toc/api/JoplinContentScripts.d.ts
index 09ad5178a4..145e9d145a 100644
--- a/packages/app-cli/tests/support/plugins/toc/api/JoplinContentScripts.d.ts
+++ b/packages/app-cli/tests/support/plugins/toc/api/JoplinContentScripts.d.ts
@@ -23,10 +23,18 @@ export default class JoplinContentScripts {
      * * [View the renderer demo plugin](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/content_script)
      * * [View the editor demo plugin](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/codemirror_content_script)
      *
+     * See also the [postMessage demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages)
+     *
      * @param type Defines how the script will be used. See the type definition for more information about each supported type.
      * @param id A unique ID for the content script.
      * @param scriptPath Must be a path relative to the plugin main script. For example, if your file content_script.js is next to your index.ts file, you would set `scriptPath` to `"./content_script.js`.
      */
     register(type: ContentScriptType, id: string, scriptPath: string): Promise<void>;
-    onMessage(id: string, callback: any): Promise<void>;
+    /**
+     * Listens to a messages sent from the content script using postMessage().
+     * See {@link ContentScriptType} for more information as well as the
+     * [postMessage
+     * demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages)
+     */
+    onMessage(contentScriptId: string, callback: any): Promise<void>;
 }
diff --git a/packages/app-cli/tests/support/plugins/toc/api/types.ts b/packages/app-cli/tests/support/plugins/toc/api/types.ts
index bc3219ac27..c8110fb650 100644
--- a/packages/app-cli/tests/support/plugins/toc/api/types.ts
+++ b/packages/app-cli/tests/support/plugins/toc/api/types.ts
@@ -458,7 +458,7 @@ export enum ContentScriptType {
 	 * });
 	 * ```
 	 *
-	 * See {@link JoplinContentScript.onMessage} for more details, as well as
+	 * See {@link JoplinContentScripts.onMessage} for more details, as well as
 	 * the [postMessage
 	 * demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages).
 	 *
@@ -557,7 +557,7 @@ export enum ContentScriptType {
 	 * });
 	 * ```
 	 *
-	 * See {@link JoplinContentScript.onMessage} for more details, as well as
+	 * See {@link JoplinContentScripts.onMessage} for more details, as well as
 	 * the [postMessage
 	 * demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages).
 	 *
diff --git a/packages/app-cli/tests/support/plugins/toc/package.json b/packages/app-cli/tests/support/plugins/toc/package.json
index abb434bb0f..38183b8290 100644
--- a/packages/app-cli/tests/support/plugins/toc/package.json
+++ b/packages/app-cli/tests/support/plugins/toc/package.json
@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "description": "",
   "scripts": {
-    "dist": "webpack",
+    "dist": "webpack --joplin-plugin-config buildMain && webpack --joplin-plugin-config buildExtraScripts && webpack --joplin-plugin-config createArchive",
     "prepare": "npm run dist",
     "update": "npm install -g generator-joplin && yo joplin --update"
   },
@@ -22,9 +22,10 @@
     "typescript": "^3.9.3",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11",
-    "chalk": "^4.1.0"
+    "chalk": "^4.1.0",
+    "yargs": "^16.2.0"
   },
   "dependencies": {
     "uslug": "^1.0.4"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/app-cli/tests/support/plugins/toc/webpack.config.js b/packages/app-cli/tests/support/plugins/toc/webpack.config.js
index 35538a5298..ec6c21ff26 100644
--- a/packages/app-cli/tests/support/plugins/toc/webpack.config.js
+++ b/packages/app-cli/tests/support/plugins/toc/webpack.config.js
@@ -33,10 +33,6 @@ const manifest = readManifest(manifestPath);
 const pluginArchiveFilePath = path.resolve(publishDir, `${manifest.id}.jpl`);
 const pluginInfoFilePath = path.resolve(publishDir, `${manifest.id}.json`);
 
-fs.removeSync(distDir);
-fs.removeSync(publishDir);
-fs.mkdirpSync(publishDir);
-
 function validatePackageJson() {
 	const content = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
 	if (!content.name || content.name.indexOf('joplin-plugin-') !== 0) {
@@ -109,6 +105,7 @@ function createPluginInfo(manifestPath, destPath, jplFilePath) {
 
 function onBuildCompleted() {
 	try {
+		fs.removeSync(path.resolve(publishDir, 'index.js'));
 		createPluginArchive(distDir, pluginArchiveFilePath);
 		createPluginInfo(manifestPath, pluginInfoFilePath, pluginArchiveFilePath);
 		validatePackageJson();
@@ -174,6 +171,16 @@ const extraScriptConfig = Object.assign({}, baseConfig, {
 	},
 });
 
+const createArchiveConfig = {
+	stats: 'errors-only',
+	entry: './dist/index.js',
+	output: {
+		filename: 'index.js',
+		path: publishDir,
+	},
+	plugins: [new WebpackOnBuildPlugin(onBuildCompleted)],
+};
+
 function resolveExtraScriptPath(name) {
 	const relativePath = `./src/${name}`;
 
@@ -196,8 +203,8 @@ function resolveExtraScriptPath(name) {
 	};
 }
 
-function addExtraScriptConfigs(baseConfig, userConfig) {
-	if (!userConfig.extraScripts.length) return baseConfig;
+function buildExtraScriptConfigs(userConfig) {
+	if (!userConfig.extraScripts.length) return [];
 
 	const output = [];
 
@@ -209,22 +216,55 @@ function addExtraScriptConfigs(baseConfig, userConfig) {
 		}));
 	}
 
-	return baseConfig.concat(output);
+	return output;
 }
 
-function addLastConfigStep(config) {
-	const lastConfig = config[config.length - 1];
-	if (!lastConfig.plugins) lastConfig.plugins = [];
-	lastConfig.plugins.push(new WebpackOnBuildPlugin(onBuildCompleted));
-	config[config.length - 1] = lastConfig;
-	return config;
+function main(processArgv) {
+	const yargs = require('yargs/yargs');
+	const argv = yargs(processArgv).argv;
+
+	const configName = argv['joplin-plugin-config'];
+	if (!configName) throw new Error('A config file must be specified via the --joplin-plugin-config flag');
+
+	// Webpack configurations run in parallel, while we need them to run in
+	// sequence, and to do that it seems the only way is to run webpack multiple
+	// times, with different config each time.
+
+	const configs = {
+		// Builds the main src/index.ts and copy the extra content from /src to
+		// /dist including scripts, CSS and any other asset.
+		buildMain: pluginConfig,
+
+		// Builds the extra scripts as defined in plugin.config.json. When doing
+		// so, some JavaScript files that were copied in the previous might be
+		// overwritten here by the compiled version. This is by design. The
+		// result is that JS files that don't need compilation, are simply
+		// copied to /dist, while those that do need it are correctly compiled.
+		buildExtraScripts: buildExtraScriptConfigs(userConfig),
+
+		// Ths config is for creating the .jpl, which is done via the plugin, so
+		// it doesn't actually need an entry and output, however webpack won't
+		// run without this. So we give it an entry that we know is going to
+		// exist and output in the publish dir. Then the plugin will delete this
+		// temporary file before packaging the plugin.
+		createArchive: createArchiveConfig,
+	};
+
+	// If we are running the first config step, we clean up and create the build
+	// directories.
+	if (configName === 'buildMain') {
+		fs.removeSync(distDir);
+		fs.removeSync(publishDir);
+		fs.mkdirpSync(publishDir);
+	}
+
+	return configs[configName];
 }
 
-let exportedConfigs = [pluginConfig];
+let exportedConfigs = [];
 
 try {
-	exportedConfigs = addExtraScriptConfigs(exportedConfigs, userConfig);
-	exportedConfigs = addLastConfigStep(exportedConfigs);
+	exportedConfigs = main(process.argv);
 } catch (error) {
 	console.error(chalk.red(error.message));
 	process.exit(1);
diff --git a/packages/app-cli/tests/support/plugins/withExternalModules/.gitignore b/packages/app-cli/tests/support/plugins/withExternalModules/.gitignore
index 7a4fea3fe7..622f443408 100644
--- a/packages/app-cli/tests/support/plugins/withExternalModules/.gitignore
+++ b/packages/app-cli/tests/support/plugins/withExternalModules/.gitignore
@@ -1,7 +1,3 @@
 dist/
 node_modules/
 publish/
-
-
-
-
diff --git a/packages/app-cli/tests/support/plugins/withExternalModules/.npmignore b/packages/app-cli/tests/support/plugins/withExternalModules/.npmignore
index 3f18d39bd0..80f70d77e9 100644
--- a/packages/app-cli/tests/support/plugins/withExternalModules/.npmignore
+++ b/packages/app-cli/tests/support/plugins/withExternalModules/.npmignore
@@ -6,7 +6,3 @@
 /dist
 tsconfig.json
 webpack.config.js
-
-
-
-
diff --git a/packages/app-cli/tests/support/plugins/withExternalModules/api/JoplinContentScripts.d.ts b/packages/app-cli/tests/support/plugins/withExternalModules/api/JoplinContentScripts.d.ts
index 09ad5178a4..145e9d145a 100644
--- a/packages/app-cli/tests/support/plugins/withExternalModules/api/JoplinContentScripts.d.ts
+++ b/packages/app-cli/tests/support/plugins/withExternalModules/api/JoplinContentScripts.d.ts
@@ -23,10 +23,18 @@ export default class JoplinContentScripts {
      * * [View the renderer demo plugin](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/content_script)
      * * [View the editor demo plugin](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/codemirror_content_script)
      *
+     * See also the [postMessage demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages)
+     *
      * @param type Defines how the script will be used. See the type definition for more information about each supported type.
      * @param id A unique ID for the content script.
      * @param scriptPath Must be a path relative to the plugin main script. For example, if your file content_script.js is next to your index.ts file, you would set `scriptPath` to `"./content_script.js`.
      */
     register(type: ContentScriptType, id: string, scriptPath: string): Promise<void>;
-    onMessage(id: string, callback: any): Promise<void>;
+    /**
+     * Listens to a messages sent from the content script using postMessage().
+     * See {@link ContentScriptType} for more information as well as the
+     * [postMessage
+     * demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages)
+     */
+    onMessage(contentScriptId: string, callback: any): Promise<void>;
 }
diff --git a/packages/app-cli/tests/support/plugins/withExternalModules/api/types.ts b/packages/app-cli/tests/support/plugins/withExternalModules/api/types.ts
index bc3219ac27..c8110fb650 100644
--- a/packages/app-cli/tests/support/plugins/withExternalModules/api/types.ts
+++ b/packages/app-cli/tests/support/plugins/withExternalModules/api/types.ts
@@ -458,7 +458,7 @@ export enum ContentScriptType {
 	 * });
 	 * ```
 	 *
-	 * See {@link JoplinContentScript.onMessage} for more details, as well as
+	 * See {@link JoplinContentScripts.onMessage} for more details, as well as
 	 * the [postMessage
 	 * demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages).
 	 *
@@ -557,7 +557,7 @@ export enum ContentScriptType {
 	 * });
 	 * ```
 	 *
-	 * See {@link JoplinContentScript.onMessage} for more details, as well as
+	 * See {@link JoplinContentScripts.onMessage} for more details, as well as
 	 * the [postMessage
 	 * demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages).
 	 *
diff --git a/packages/app-cli/tests/support/plugins/withExternalModules/package.json b/packages/app-cli/tests/support/plugins/withExternalModules/package.json
index 3c86edffd7..f226e7a0f1 100644
--- a/packages/app-cli/tests/support/plugins/withExternalModules/package.json
+++ b/packages/app-cli/tests/support/plugins/withExternalModules/package.json
@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "description": "",
   "scripts": {
-    "dist": "webpack",
+    "dist": "webpack --joplin-plugin-config buildMain && webpack --joplin-plugin-config buildExtraScripts && webpack --joplin-plugin-config createArchive",
     "prepare": "npm run dist",
     "update": "npm install -g generator-joplin && yo joplin --update"
   },
@@ -22,7 +22,8 @@
     "typescript": "^3.9.3",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11",
-    "chalk": "^4.1.0"
+    "chalk": "^4.1.0",
+    "yargs": "^16.2.0"
   },
   "dependencies": {
     "left-pad": "^1.3.0"
diff --git a/packages/app-cli/tests/support/plugins/withExternalModules/webpack.config.js b/packages/app-cli/tests/support/plugins/withExternalModules/webpack.config.js
index 35538a5298..ec6c21ff26 100644
--- a/packages/app-cli/tests/support/plugins/withExternalModules/webpack.config.js
+++ b/packages/app-cli/tests/support/plugins/withExternalModules/webpack.config.js
@@ -33,10 +33,6 @@ const manifest = readManifest(manifestPath);
 const pluginArchiveFilePath = path.resolve(publishDir, `${manifest.id}.jpl`);
 const pluginInfoFilePath = path.resolve(publishDir, `${manifest.id}.json`);
 
-fs.removeSync(distDir);
-fs.removeSync(publishDir);
-fs.mkdirpSync(publishDir);
-
 function validatePackageJson() {
 	const content = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
 	if (!content.name || content.name.indexOf('joplin-plugin-') !== 0) {
@@ -109,6 +105,7 @@ function createPluginInfo(manifestPath, destPath, jplFilePath) {
 
 function onBuildCompleted() {
 	try {
+		fs.removeSync(path.resolve(publishDir, 'index.js'));
 		createPluginArchive(distDir, pluginArchiveFilePath);
 		createPluginInfo(manifestPath, pluginInfoFilePath, pluginArchiveFilePath);
 		validatePackageJson();
@@ -174,6 +171,16 @@ const extraScriptConfig = Object.assign({}, baseConfig, {
 	},
 });
 
+const createArchiveConfig = {
+	stats: 'errors-only',
+	entry: './dist/index.js',
+	output: {
+		filename: 'index.js',
+		path: publishDir,
+	},
+	plugins: [new WebpackOnBuildPlugin(onBuildCompleted)],
+};
+
 function resolveExtraScriptPath(name) {
 	const relativePath = `./src/${name}`;
 
@@ -196,8 +203,8 @@ function resolveExtraScriptPath(name) {
 	};
 }
 
-function addExtraScriptConfigs(baseConfig, userConfig) {
-	if (!userConfig.extraScripts.length) return baseConfig;
+function buildExtraScriptConfigs(userConfig) {
+	if (!userConfig.extraScripts.length) return [];
 
 	const output = [];
 
@@ -209,22 +216,55 @@ function addExtraScriptConfigs(baseConfig, userConfig) {
 		}));
 	}
 
-	return baseConfig.concat(output);
+	return output;
 }
 
-function addLastConfigStep(config) {
-	const lastConfig = config[config.length - 1];
-	if (!lastConfig.plugins) lastConfig.plugins = [];
-	lastConfig.plugins.push(new WebpackOnBuildPlugin(onBuildCompleted));
-	config[config.length - 1] = lastConfig;
-	return config;
+function main(processArgv) {
+	const yargs = require('yargs/yargs');
+	const argv = yargs(processArgv).argv;
+
+	const configName = argv['joplin-plugin-config'];
+	if (!configName) throw new Error('A config file must be specified via the --joplin-plugin-config flag');
+
+	// Webpack configurations run in parallel, while we need them to run in
+	// sequence, and to do that it seems the only way is to run webpack multiple
+	// times, with different config each time.
+
+	const configs = {
+		// Builds the main src/index.ts and copy the extra content from /src to
+		// /dist including scripts, CSS and any other asset.
+		buildMain: pluginConfig,
+
+		// Builds the extra scripts as defined in plugin.config.json. When doing
+		// so, some JavaScript files that were copied in the previous might be
+		// overwritten here by the compiled version. This is by design. The
+		// result is that JS files that don't need compilation, are simply
+		// copied to /dist, while those that do need it are correctly compiled.
+		buildExtraScripts: buildExtraScriptConfigs(userConfig),
+
+		// Ths config is for creating the .jpl, which is done via the plugin, so
+		// it doesn't actually need an entry and output, however webpack won't
+		// run without this. So we give it an entry that we know is going to
+		// exist and output in the publish dir. Then the plugin will delete this
+		// temporary file before packaging the plugin.
+		createArchive: createArchiveConfig,
+	};
+
+	// If we are running the first config step, we clean up and create the build
+	// directories.
+	if (configName === 'buildMain') {
+		fs.removeSync(distDir);
+		fs.removeSync(publishDir);
+		fs.mkdirpSync(publishDir);
+	}
+
+	return configs[configName];
 }
 
-let exportedConfigs = [pluginConfig];
+let exportedConfigs = [];
 
 try {
-	exportedConfigs = addExtraScriptConfigs(exportedConfigs, userConfig);
-	exportedConfigs = addLastConfigStep(exportedConfigs);
+	exportedConfigs = main(process.argv);
 } catch (error) {
 	console.error(chalk.red(error.message));
 	process.exit(1);
diff --git a/packages/generator-joplin/generators/app/templates/api/JoplinContentScripts.d.ts b/packages/generator-joplin/generators/app/templates/api/JoplinContentScripts.d.ts
index 09ad5178a4..145e9d145a 100644
--- a/packages/generator-joplin/generators/app/templates/api/JoplinContentScripts.d.ts
+++ b/packages/generator-joplin/generators/app/templates/api/JoplinContentScripts.d.ts
@@ -23,10 +23,18 @@ export default class JoplinContentScripts {
      * * [View the renderer demo plugin](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/content_script)
      * * [View the editor demo plugin](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/codemirror_content_script)
      *
+     * See also the [postMessage demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages)
+     *
      * @param type Defines how the script will be used. See the type definition for more information about each supported type.
      * @param id A unique ID for the content script.
      * @param scriptPath Must be a path relative to the plugin main script. For example, if your file content_script.js is next to your index.ts file, you would set `scriptPath` to `"./content_script.js`.
      */
     register(type: ContentScriptType, id: string, scriptPath: string): Promise<void>;
-    onMessage(id: string, callback: any): Promise<void>;
+    /**
+     * Listens to a messages sent from the content script using postMessage().
+     * See {@link ContentScriptType} for more information as well as the
+     * [postMessage
+     * demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages)
+     */
+    onMessage(contentScriptId: string, callback: any): Promise<void>;
 }
diff --git a/packages/generator-joplin/generators/app/templates/api/types.ts b/packages/generator-joplin/generators/app/templates/api/types.ts
index bc3219ac27..c8110fb650 100644
--- a/packages/generator-joplin/generators/app/templates/api/types.ts
+++ b/packages/generator-joplin/generators/app/templates/api/types.ts
@@ -458,7 +458,7 @@ export enum ContentScriptType {
 	 * });
 	 * ```
 	 *
-	 * See {@link JoplinContentScript.onMessage} for more details, as well as
+	 * See {@link JoplinContentScripts.onMessage} for more details, as well as
 	 * the [postMessage
 	 * demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages).
 	 *
@@ -557,7 +557,7 @@ export enum ContentScriptType {
 	 * });
 	 * ```
 	 *
-	 * See {@link JoplinContentScript.onMessage} for more details, as well as
+	 * See {@link JoplinContentScripts.onMessage} for more details, as well as
 	 * the [postMessage
 	 * demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages).
 	 *