load main script and css by reading asset-manifest.

This commit is contained in:
Peng Lyu
2018-05-19 14:18:00 -07:00
parent 8f429963e4
commit 400f9ed41a
3 changed files with 6 additions and 135 deletions

View File

@ -87,18 +87,14 @@ class ReactPanel {
}
private _getHtmlForWebview() {
const manifest = require(path.join(this._extensionPath, 'build', 'asset-manifest.json'));
const mainScript = manifest['main.js'];
const mainStyle = manifest['main.css'];
// Local path to main script run in the webview
const scriptPathOnDisk = vscode.Uri.file(path.join(this._extensionPath, 'build', 'static', 'js', 'main.6883c34d.js'));
// And the uri we use to load this script in the webview
const scriptPathOnDisk = vscode.Uri.file(path.join(this._extensionPath, 'build', mainScript));
const scriptUri = scriptPathOnDisk.with({ scheme: 'vscode-resource' });
const stylePathOnDisk = vscode.Uri.file(path.join(this._extensionPath, 'build', 'static', 'css', 'main.29266132.css'));
// And the uri we use to load this style in the webview
const stylePathOnDisk = vscode.Uri.file(path.join(this._extensionPath, 'build', mainStyle));
const styleUri = stylePathOnDisk.with({ scheme: 'vscode-resource' });
const baseStyles = `<link rel="stylesheet" type="text/css" href="${styleUri}">`;
// Use a nonce to whitelist which scripts can be run
const nonce = getNonce();
@ -110,7 +106,7 @@ class ReactPanel {
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<title>React App</title>
${baseStyles}
<link rel="stylesheet" type="text/css" href="${styleUri}">
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src vscode-resource: https:; script-src 'nonce-${nonce}';style-src vscode-resource: 'unsafe-inline' http: https: data:;">
<base href="${vscode.Uri.file(path.join(this._extensionPath, 'build')).with({ scheme: 'vscode-resource' })}/">
</head>