add webpack bundling

Author: johnmurphy01

.gitignore

@@ -1,4 +1,5 @@
 node_modules
 out
 *.vsix
-vsc-extension-quickstart.md
+vsc-extension-quickstart.md
+dist

.vscodeignore

@@ -1,12 +1,14 @@
 .vscode/**
 .vscode-test/**
-out/test/**
-src/**
 .gitignore
 vsc-extension-quickstart.md
 **/tsconfig.json
 **/.eslintrc.json
 **/*.map
 **/*.ts
+out/
+src/
+tsconfig.json
+webpack.config.js
 node_modules
 example/*

README.md

@@ -68,3 +68,7 @@ This extension is currently in development, so any issues or feedback would be a
 ### 1.0.3
 
 - Add new Marketplace categories and tags
+
+### 1.0.4
+
+- Use Webpack to bundle extension

example/.DS_Store

@@ -3,7 +3,7 @@
   "displayName": "css-inline-converter",
   "description": "Converts CSS from inline JSX/TSX to regular CSS notation",
   "icon": "images/icon.png",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "engines": {
     "vscode": "^1.43.0"
   },
@@ -25,7 +25,7 @@
   "activationEvents": [
     "onCommand:extension.cssinline"
   ],
-  "main": "./out/extension.js",
+  "main": "./dist/extension.js",
   "contributes": {
     "commands": [
       {
@@ -36,12 +36,15 @@
   },
   "publisher": "johnmurphy01",
   "scripts": {
-    "vscode:prepublish": "yarn run compile",
     "compile": "tsc -p ./",
     "lint": "eslint src --ext ts",
     "watch": "tsc -watch -p ./",
     "pretest": "yarn run compile && yarn run lint",
-    "test": "node ./out/test/runTest.js"
+    "test": "node ./out/test/runTest.js",
+    "vscode:prepublish": "webpack --mode production",
+    "webpack": "webpack --mode development",
+    "webpack-dev": "webpack --mode development --watch",
+    "test-compile": "tsc -p ./"
   },
   "devDependencies": {
     "@types/glob": "^7.1.1",
@@ -53,8 +56,11 @@
     "eslint": "^6.8.0",
     "glob": "^7.1.6",
     "mocha": "^7.0.1",
+    "ts-loader": "^6.2.2",
     "typescript": "^3.7.5",
-    "vscode-test": "^1.3.0"
+    "vscode-test": "^1.3.0",
+    "webpack": "^4.42.0",
+    "webpack-cli": "^3.3.11"
   },
   "dependencies": {
     "@types/lodash": "^4.14.149",

package.json

@@ -0,0 +1,41 @@
+//@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;