[chore] Configure WebPack

[tinacious]

Figma plugins are not bootstrapped with bundling by default, they just transpile every single TypeScript file individually. This works if your plugin has no UI since you just need a code.ts file. It doesn't work too well if you have UI and want to maintain some level of code organization.

They do provide instructions for configuring WebPack: https://www.figma.com/plugin-docs/libraries-and-bundling/#setup-typescript-with-webpack

There's also a WebPack React example: https://github.com/figma/plugin-samples/tree/master/webpack-react – Can we quickly adapt this to use Vue so as to limit the refactoring we need to do? We can probably use the plugins config used here to support inlining the TypeScript code as JS in the ui.html file.

  plugins: [
    new webpack.DefinePlugin({
      global: {}, // Fix missing symbol error when running in developer VM
    }),
    new HtmlWebpackPlugin({
      inject: 'body',
      template: './src/ui.html',
      filename: 'ui.html',
      chunks: ['ui'],
    }),
    new HtmlInlineScriptPlugin({
      htmlMatchPattern: [/ui.html/],
      scriptMatchPattern: [/.js$/],
    }),

Let's bundle the dependencies instead of using <script src="" /> tags to CDN resources.