Merge pull request #98 from Microsoft/joh/webpack

webpack sample

vscode-samples.code-workspace

@@ -65,6 +65,9 @@
 		},
 		{
 			"path": "webview-sample"
+		},
+		{
+			"path": "webpack-sample"
 		}
 	]
-}
+}

webpack-sample/.gitignore

@@ -0,0 +1,3 @@
+dist
+node_modules
+*.vsix

webpack-sample/.vscode/launch.json

@@ -0,0 +1,19 @@
+// A launch configuration that compiles the extension and then opens it inside a new window
+{
+    "version": "0.1.0",
+    "configurations": [
+        {
+            "name": "Launch Extension",
+            "type": "extensionHost",
+            "request": "launch",
+            "runtimeExecutable": "${execPath}",
+            "args": [
+                "--extensionDevelopmentPath=${workspaceFolder}"
+            ],
+            "outFiles": [
+                "${workspaceFolder}/dist/**/*.js"
+            ],
+            "preLaunchTask": "npm: webpack"
+        }
+    ]
+}

webpack-sample/README.md

@@ -0,0 +1,28 @@
+# Webpack & Extensions
+
+This is an extension that uses [https://webpack.js.org]() to bundle and minify its sources. Using webpack will help to reduce the install- and startup-time of large extensions because instead of hundreds of files, a single file is produced. 
+
+## Configuration
+
+Webpack in configured in the [`webpack.config.js`](./webpack.config.js)-file. Find annotation inside the file itself or refer to the excellet webpack documentation: [https://webpack.js.org/configuration/](). In short, the config-files defines the entry point of the extension, to use TypeScript, to produce a commonjs-module, and what modules not to bundle.
+
+## Scripts
+
+The `scripts`-section of the [`package.json`](./package.json)-file has entries for webpack. Those compile TypeScript and produce the bundle as well as producing a minified production build. Note, that there is no dedicated TypeScript-script as webpack takes are of that.
+
+
+## More
+
+If you use `vscode-nls` to localize your extension that you likely also use `vscode-nls-dev` to create language bundles at build time. To support webpack, a loader has been added to vscode-nls-dev. Add the section below to the `modules/rules`-configuration. 
+
+```js
+{
+  // vscode-nls-dev loader:
+  // * rewrite nls-calls
+  loader: 'vscode-nls-dev/lib/webpack-loader',
+  options: {
+    base: path.join(__dirname, 'src')
+}
+```
+
+A good sample is the shared config built-in extensions use: https://github.com/Microsoft/vscode/blob/bf5b0585d2a8759541690b2c564b96cb604ff92e/extensions/shared.webpack.config.js#L29-L51

webpack-sample/package.json

@@ -0,0 +1,39 @@
+{
+    "name": "webpack-sample",
+    "displayName": "webpack-sample",
+    "description": "",
+    "version": "0.0.1",
+    "publisher": "jrieken",
+    "engines": {
+        "vscode": "^1.27.0"
+    },
+    "categories": [
+        "Other"
+    ],
+    "activationEvents": [
+        "onCommand:extension.helloWebpack"
+    ],
+    "main": "./dist/extension",
+    "contributes": {
+        "commands": [
+            {
+                "command": "extension.helloWebpack",
+                "title": "Hello Webpack"
+            }
+        ]
+    },
+    "scripts": {
+        "vscode:prepublish": "webpack --mode production",
+        "webpack": "webpack --mode development",
+        "webpack-dev": "webpack --mode development --watch",
+        "postinstall": "node ./node_modules/vscode/bin/install"
+    },
+    "devDependencies": {
+        "@types/node": "^7.0.43",
+        "ts-loader": "^4.4.2",
+        "typescript": "3.0.3",
+        "vscode": "^1.1.5",
+        "webpack": "^4.19.1",
+        "webpack-cli": "^3.1.0"
+    }
+}

webpack-sample/src/extension.ts

@@ -0,0 +1,17 @@
+/*---------------------------------------------------------
+ * Copyright (C) Microsoft Corporation. All rights reserved.
+ *--------------------------------------------------------*/
+
+'use strict';
+
+import * as vscode from 'vscode';
+import { add } from './math';
+
+export function activate(context: vscode.ExtensionContext) {
+
+    let disposable = vscode.commands.registerCommand('extension.helloWebpack', () => {
+        vscode.window.showInformationMessage(`41 + 1 = ${add(41, 1)}`);
+    });
+
+    context.subscriptions.push(disposable);
+}

webpack-sample/src/math.ts

@@ -0,0 +1,13 @@
+/*---------------------------------------------------------
+ * Copyright (C) Microsoft Corporation. All rights reserved.
+ *--------------------------------------------------------*/
+
+'use strict';
+
+export function add(a: number, b: number): number {
+    return a + b;
+}
+
+export function sub(a: number, b: number): number {
+    return a - b;
+}

webpack-sample/tsconfig.json

@@ -0,0 +1,16 @@
+{
+    "compilerOptions": {
+        "module": "es6",
+        "target": "es6",
+        "outDir": "out",
+        "lib": [
+            "es6"
+        ],
+        "sourceMap": true,
+        "rootDir": "."
+    },
+    "include": [
+        "src/**/*.ts",
+        "./node_modules/vscode/vscode.d.ts",
+    ]
+}

webpack-sample/webpack.config.js

@@ -0,0 +1,41 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+//@ts-check
+
+'use strict';
+
+const path = require('path');
+
+/**@type {import('webpack').Configuration}*/
+const config = {
+    target: 'node', // vscode extensions run in a Node.js-context 📖 -> https://webpack.js.org/configuration/node/
+
+    entry: './src/extension.ts', // the entry point of this extension, 📖 -> https://webpack.js.org/configuration/entry-context/
+    output: { // the bundle is stored in the 'dist' folder (check package.json), 📖 -> https://webpack.js.org/configuration/output/
+        path: path.resolve(__dirname, 'dist'),
+        filename: 'extension.js',
+        libraryTarget: "commonjs2",
+        devtoolModuleFilenameTemplate: "../[resource-path]",
+    },
+    devtool: 'source-map',
+    externals: {
+        vscode: "commonjs vscode" // the vscode-module is created on-the-fly and must be excluded. Add other modules that cannot be webpack'ed, 📖 -> https://webpack.js.org/configuration/externals/
+    },
+    resolve: { // support reading TypeScript and JavaScript files, 📖 -> https://github.com/TypeStrong/ts-loader
+        extensions: ['.ts', '.js']
+    },
+    module: {
+        rules: [{
+            test: /\.ts$/,
+            exclude: /node_modules/,
+            use: [{
+                loader: 'ts-loader',
+            }]
+        }]
+    },
+}
+
+module.exports = config;