figma-namer/webpack.config.js at main · groupultra/figma-namer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const InlineChunkHtmlPlugin = require('inline-chunk-html-plugin');

module.exports = (env, argv) => {
  const isProduction = argv.mode === 'production';

  return [
    // Plugin main thread (sandbox code.ts -> code.js)
    // Figma's sandbox uses an older JS engine — target ES2017 via tsconfig.plugin.json
    {
      name: 'plugin',
      entry: './src/plugin/code.ts',
      output: {
        filename: 'code.js',
        path: path.resolve(__dirname, 'dist'),
      },
      module: {
        rules: [
          {
            test: /\.tsx?$/,
            use: {
              loader: 'ts-loader',
              options: {
                configFile: 'tsconfig.plugin.json',
              },
            },
            exclude: /node_modules/,
          },
        ],
      },
      resolve: {
        extensions: ['.ts', '.tsx', '.js'],
        alias: {
          '@shared': path.resolve(__dirname, 'src/shared'),
          '@plugin': path.resolve(__dirname, 'src/plugin'),
        },
      },
      devtool: isProduction ? false : 'inline-source-map',
      target: 'web',
    },
    // Plugin UI (React iframe -> ui.html with inlined JS/CSS)
    {
      name: 'ui',
      entry: './src/ui/index.tsx',
      output: {
        filename: 'ui.js',
        path: path.resolve(__dirname, 'dist'),
      },
      module: {
        rules: [
          {
            test: /\.tsx?$/,
            use: 'ts-loader',
            exclude: /node_modules/,
          },
          {
            test: /\.css$/,
            use: ['style-loader', 'css-loader'],
          },
        ],
      },
      resolve: {
        extensions: ['.ts', '.tsx', '.js', '.jsx'],
        alias: {
          '@shared': path.resolve(__dirname, 'src/shared'),
          '@ui': path.resolve(__dirname, 'src/ui'),
          '@vlm': path.resolve(__dirname, 'src/vlm'),
        },
      },
      plugins: [
        new HtmlWebpackPlugin({
          template: './src/ui/index.html',
          filename: 'ui.html',
          chunks: ['main'],
          inject: 'body',
          inlineSource: '.(js|css)$',
        }),
        new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/ui/]),
      ],
      devtool: isProduction ? false : 'inline-source-map',
      target: 'web',
    },
  ];
};