【Figma Plugins】Figma PluginsにWebpackを導入する

## はじめに
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/83cf8357-dd0a-07b7-3de9-e87f6f7ebfc3.png)

FigmaのPluginを開発する際、Figma PluginsにWebpackを導入したいと思ったことはありますか？
この記事では、Figma PluginsにWebpackを導入する方法を解説します。

## Figma PluginsにWebpackを導入する
Webpackは複数のJavaScriptファイルをパッケージ化するモジュールバンドラです。
Webpackを導入するには、以下の手順で行います。

1. Webpackをインストールする
1. WebpackでTypescriptをセットアップする


### 1. Webpackをインストールする
#### 1-1. npm をインストールする
まずは、ターミナルで以下のコマンドを入力します。

```console.
npm install
```

#### 1-2. webpackをインストールする
```console.
npm install webpack webpack-cli --save-dev
```

### 2. WebpackでTypescriptをセットアップする
プラグインを正しくコンパイルするためには、Typescript を使用するように設定する必要があります。

#### 2-1. Typescript コンパイラとローダをインストール
まずは、以下のコマンドを入力して、Typescript コンパイラとローダをインストールします。
インストールが完了すると、`package.json` に `ts-loader` が追加されます。

```console.
npm install --save-dev typescript ts-loader
```

#### 2-2. distフォルダを作成する
以下の画像のようにdistフォルダを作り、その中に `code.js` ファイルを移動させます。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/503b79e9-1de9-1a0e-3e7b-bb6f53e4fe68.png)


#### 2-3. srcフォルダを作成する
以下の画像のようにsrcフォルダを作り、その中に `code.js` ファイルを移動させます。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/bfdbbee3-7503-3dd2-7cc0-82de1c82f8e8.png)

#### 2-4. `manifest.json` を書き換える
以下のように `manifest.json` を書き換える

```diff_json
{
  "name": "sample",
  "id": "*******************",
  "api": "1.0.0",
- "main": "code.js",
+ "main": "dist/code.js",
  ...
}
```

#### 2-5. `package.json` を書き換える
以下のように `package.json` を書き換える

```diff_json
"scripts": {
-   "build": "tsc -p tsconfig.json",
+   "build": "webpack",
    ...
```

#### 2-6. `tsconfig.json` を書き換える
以下のように `tsconfig.json` を書き換える

```diff_json
{
  "compilerOptions": {
    "target": "es6",
    "lib": ["es6"],
    "strict": true,
    "typeRoots": [
      "./node_modules/@types",
      "./node_modules/@figma"
-   ]
+   ],
+   "outDir": "./dist",
+   "jsx": "react",
+   "allowJs": true,
+   "moduleResolution": "node"
+ },
+ "include": ["src/**/*.ts"]
}
```

#### 2-7. `webpack.config.js` を新規作成する
以下のような内容で、新しく `webpack.config.js` というファイルを作成する

```webpack.config.js
const path = require('path');
const webpack = require('webpack');

module.exports = (env, argv) => ({
mode: argv.mode === 'production' ? 'production' : 'development',

// This is necessary because Figma's 'eval' works differently than normal eval
devtool: argv.mode === 'production' ? false : 'inline-source-map',
  entry: {
    code: './src/code.ts' // This is the entry point for our plugin code.
  },
  module: {
    rules: [
      // Converts TypeScript code to JavaScript
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  // Webpack tries these extensions for you if you omit the extension like "import './file'"
  resolve: {
    extensions: ['.ts', '.js'],
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },
});
```

#### 2-8. `npm run build` が通ったら、完了


```console
npm run build  
```
上記のコマンドを実行すると、以下のようにエラーが出なかったら、完成です。

```console         
> sample@1.0.0 build
> webpack

asset code.js 6.81 KiB [compared for emit] (name: code)
runtime modules 670 bytes 3 modules
cacheable modules 323 bytes
  ./src/code.ts 259 bytes [built] [code generated]
webpack 5.92.1 compiled successfully in 1226 ms
```

## まとめ

この記事では、Figma PluginsにWebpackを導入する方法を解説しました。
ぜひこの記事を参考にwebpackを導入してみてください。

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaで記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。

https://twitter.com/degudegu2510