实现加载 webpack 打包内容

.eslintrc.json

@@ -0,0 +1,24 @@
+{
+    "root": true,
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": 6,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "@typescript-eslint"
+    ],
+    "rules": {
+        "@typescript-eslint/naming-convention": "off",
+        "@typescript-eslint/semi": "warn",
+        "curly": "warn",
+        "eqeqeq": "warn",
+        "no-throw-literal": "warn",
+        "semi": "off",
+    },
+    "ignorePatterns": [
+        "out",
+        "dist",
+        "**/*.d.ts"
+    ]
+}

.gitignore

@@ -0,0 +1,5 @@
+out
+dist
+node_modules
+.vscode-test/
+*.vsix

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+	// See http://go.microsoft.com/fwlink/?LinkId=827846
+	// for the documentation about the extensions.json format
+	"recommendations": [
+		"amodio.tsl-problem-matcher"
+	]
+}

.vscode/launch.json

@@ -0,0 +1,23 @@
+// A launch configuration that compiles the extension and then opens it inside a new window
+// Use IntelliSense to learn about possible attributes.
+// Hover to view descriptions of existing attributes.
+// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Run Extension",
+            "type": "extensionHost",
+            "request": "launch",
+            "args": ["--extensionDevelopmentPath=${workspaceFolder}"],
+            "outFiles": ["${workspaceFolder}/dist/**/*.js"],
+            "skipFiles": [
+                "<node_internals>/**",
+                "**/node_modules/**",
+                "**/Resources/app/out/vs/**"
+            ],
+            "sourceMaps": true,
+            "preLaunchTask": "tasks: dev"
+        }
+    ]
+}

.vscode/settings.json

@@ -0,0 +1,11 @@
+// Place your settings in this file to overwrite default and user settings.
+{
+    "files.exclude": {
+        "out": false // set this to true to hide the "out" folder with the compiled JS files
+    },
+    "search.exclude": {
+        "out": true // set this to false to include "out" folder in search results
+    },
+    // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
+    "typescript.tsc.autoDetect": "off"
+}

.vscode/tasks.json

@@ -0,0 +1,36 @@
+// See https://go.microsoft.com/fwlink/?LinkId=733558
+// for the documentation about the tasks.json format
+{
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "type": "npm",
+            "script": "watch-ext",
+            "problemMatcher": "$tsc-watch",
+            "isBackground": true,
+            "presentation": {
+                "reveal": "never",
+                "group": "watchers"
+            },
+            "group": {
+                "kind": "build"
+            }
+        },
+        {
+            "type": "npm",
+            "script": "start-web",
+            "problemMatcher": "$ts-webpack-watch",
+            "isBackground": true,
+            "presentation": {
+                "reveal": "never",
+                "group": "watchers"
+            },
+            "group": "build"
+        },
+        {
+            "label": "tasks: dev",
+            "dependsOn": ["npm: watch-ext", "npm: start-web"],
+            "problemMatcher": []
+        }
+    ]
+}

.vscodeignore

@@ -0,0 +1,10 @@
+.vscode/**
+.vscode-test/**
+src/**
+.gitignore
+.yarnrc
+vsc-extension-quickstart.md
+**/tsconfig.json
+**/.eslintrc.json
+**/*.map
+**/*.ts

CHANGELOG.md

@@ -0,0 +1,9 @@
+# Change Log
+
+All notable changes to the "vscode-webview-webpack-hmr-example" extension will be documented in this file.
+
+Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.
+
+## [Unreleased]
+
+- Initial release

README.md

@@ -0,0 +1,11 @@
+## 本地运行
+
+1. `git clone git@github.com:tjx666/vscode-webview-webpack-hmr-example.git`
+2. `npm install`
+3. 打开 VSCode debug 面板，点击 `Run Extension`
+4. `cmd + shift + p`，调用命令: `Open Webview For Test Webpack HMR`
+5. 不出意外你能看到下面截图中内容
+
+![成功运行截图](https://s2.loli.net/2022/03/19/nDOSRM24JNZPqYs.png)
+
+注意：需要安装 VSCode 扩展 `amodio.tsl-problem-matcher`，不然 VSCode 识别不了 webpack 什么时候打包结束

babel.config.js

@@ -0,0 +1,34 @@
+const packageJSON = require('./package.json');
+
+/** @type {import ('@babel/core').ConfigFunction} */
+module.exports = (api) => {
+    api.cache(true);
+
+    const envPreset = [
+        '@babel/env',
+        {
+            modules: false,
+            targets: 'Chrome >= 98',
+            bugfixes: true,
+            useBuiltIns: 'usage',
+            corejs: { version: packageJSON.devDependencies['core-js'].replace('^', '') },
+        },
+    ];
+
+    return {
+        sourceType: 'unambiguous',
+        presets: ['@babel/preset-typescript', envPreset],
+        plugins: [
+            '@babel/plugin-transform-runtime',
+        ],
+        env: {
+            development: {
+                presets: [['@babel/preset-react', { runtime: 'automatic', development: true }]],
+                // plugins: [require.resolve('react-refresh/babel')],
+            },
+            production: {
+                presets: [['@babel/preset-react', { runtime: 'automatic' }]],
+            },
+        },
+    };
+};