modified: Modified the release command.

Modified:

- Now `npm run release` will automatically call `npm run build`.
- Also add a new command `npm run dev` to start webpack in dev mode.
- Now using seperated config file for webpack in dev and prod.

Update Github Action script to adapt this change.

Author: nfnfgo

.github/workflows/webpack.yml

@@ -25,7 +25,6 @@ jobs:
     - name: Build
       run: |
         npm install
-        npm run build
         npm run release
         unzip release.zip -d ./artifact_content
         rm release.zip

docs/dev/renderer.md

@@ -4,7 +4,7 @@
 ![Webpack](https://img.shields.io/badge/Webpack-grey?style=for-the-badge&logo=react&logoColor=white)
 
 - [Introduction](#introduction)
-  - [Bundling Using Webpack](#bundling-using-webpack)
+  - [Start Developing](#start-developing)
   - [Create Release Version](#create-release-version)
 - [UI Development](#ui-development)
 - [Content Rendering Test Example](#content-rendering-test-example)
@@ -14,38 +14,36 @@
 
 For how to clone and build this project, checkout the third method mentioned in [Installation Guide](/docs/plug_install.md).
 
-## Bundling Using Webpack
+## Start Developing
 
-All markdown rendering business is inside Renderer Process currently, 
-and all code in Renderer process has been bundled to `dist/renderer.js` using `webpack`. 
-So before start developing, run `npm install` to get all dependencies.
+First of all, run:
 
-For a better dev experience, you could change the webpack config:
+```shell
+npm install
+```
 
-```js
-module.exports = {
+This will help you get all deps used by this project. Then you can call:
 
-    watch: true,            // rebundle when file changed
-    mode: 'development',    // enable webpack development mode
-                            // check out https://webpack.js.org/configuration/mode/ for more info.
-    ...// other configs
-};
+```shell
+npm run dev
 ```
 
-> Remember to change mode back to `production` when bundling release version.
+This will start `webpack` in watch mode with `development` flag enabled.
+
 
 ## Create Release Version
 
-`dist` directory is not included in `git`, to create a release version of this extension, please run:
+To create a release version of this extension, please run:
 
 ```shell
-npm run release
+npm run release # create Release.zip with ./dist included
 ```
 
-This script will:
+The script `npm run release` will:
 
-- First use `git archive` to create a `release.zip` file contains all code included in `git`.
-- Use `zip -r` to add `dist` directory into previously generated `release.zip`.
+1. Run `npm run build` to generate `./dist` resources.
+2. Run `git archive` to create a `release.zip` file contains all code included in `git`.
+3. Run `zip -r` to add `dist` directory into previously generated `release.zip`.
 
 # UI Development
 

package-lock.json

@@ -11,8 +11,10 @@
         "zustand": "^4.5.4"
     },
     "scripts": {
-        "build": "webpack",
-        "release": "git archive -o release.zip HEAD && zip -r release.zip dist"
+        "build": "webpack --config webpack.prod.js",
+        "dev": "webpack --config webpack.dev.js",
+        "release": "git archive -o release.zip HEAD && zip -r release.zip dist",
+        "prerelease": "npm run build"
     },
     "devDependencies": {
         "@babel/core": "^7.24.7",
@@ -23,6 +25,7 @@
         "babel-loader": "^9.1.3",
         "webpack": "^5.92.1",
         "webpack-cli": "^5.1.4",
-        "webpack-dev-server": "^5.0.4"
+        "webpack-dev-server": "^5.0.4",
+        "webpack-merge": "^6.0.1"
     }
-}
+}

package.json

@@ -1,9 +1,5 @@
 const path = require("path");
 module.exports = {
-
-    watch: false,
-    mode: 'production',
-
     resolve: {
         alias: {
             "@": path.resolve(__dirname, "src"),

webpack.config.js webpack.common.js

@@ -0,0 +1,8 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+    watch: true,
+    mode: 'development',
+    devtool: 'inline-source-map',
+});

webpack.dev.js

@@ -0,0 +1,7 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+    watch: false,
+    mode: 'production',
+});