webpackでbuildする際に、依存モジュール(ライブラリ)のライセンスをチェックする

## はじめに
webpackでbuild（全てのモジュールをbundleする）場合において、依存ライブラリのライセンスチェックを行う方法についてみていきたいと思う。

※フロントエンドでは全モジュールをbundleするので、今回見ていく方法はフロントエンドのプロジェクトにおけるライセンスチェックを行う方法になる。バックエンドのNode.jsでは仮に[Node.jsでimport・export（ES6の構文）を使えるようにwebpack × Babelの設定をやってみた](https://note.com/shift_tech/n/n77562e0926e3)のように、webpackでbuildをしていても全モジュールのbundleはしないので、以下で見ていく方法は利用できない。代わりに[]()の方法が利用できる）。

※以下では、既にwebpackの設定は済んでいる事を前提にしている。

## 結論　どうやるのか？
[License Webpack Plugin](https://github.com/xz64/license-webpack-plugin)を利用する。

```console
[study@localhost intro-vuecli]$ npm install -D license-webpack-plugin
```
```js
const { LicenseWebpackPlugin } = require('license-webpack-plugin');

module.exports = {
	// 省略
	plugins: [
		new LicenseWebpackPlugin({
			unacceptableLicenseTest: (licenseType) =>
				['GPL', 'AGPL', 'LGPL', 'NGPL'].includes(licenseType),
			outputFilename: 'meta/license.txt'
		}),
		// 省略
	]
};
```

このように設定した状態で、buildを行うと以下のように`unacceptableLicenseTest`の条件に合致する場合、buildエラーになる（以下ではエラーになるようにわざと`MIT`を設定に追加してbuildをしている）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372684/3ebefa7d-2471-150a-4601-773c56bb8e55.png)

ソースコード全体は以下。

https://github.com/yuta-katayama-23/travel-app/commit/399d9ece0528c67c0ca2a377fabd3a8f30173586

※[webpack-license-plugin](https://github.com/codepunkt/webpack-license-plugin)というライブラリもあるが、今回はGitHubのスターの多いlicense-webpack-pluginの方を利用した。

### Vue.js（2.x）だとどうなるか？
Vue-CLIであればvue.config.jsを以下のように設定する事で同じように、同様にライセンスのチェックができる。

```js
const { LicenseWebpackPlugin } = require('license-webpack-plugin');

module.exports = {
	configureWebpack: {
		plugins: [
			new LicenseWebpackPlugin({
				unacceptableLicenseTest: (licenseType) =>
					['GPL', 'AGPL', 'LGPL', 'NGPL'].includes(licenseType),
				outputFilename: 'meta/license.txt'
			})
		]
	}
};
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372684/edc717cc-1596-1c36-2b6a-9143450b802a.png)

ソースコード全体は以下。

https://github.com/yuta-katayama-23/intro-vuecli/commit/b9c071c37f29fcb4ff255602c92d6bb11602b554

## LicenseWebpackPluginの設定に関して
- unacceptableLicenseTest  
許可しないライセンス形態を配列で設定し、そのライセンスが含まれていたらtrueを返す＝NGにする、という設定
- outputFilename  
デフォルトだと`[name].licenses.txt`というファイル名になるので、それを上書きするための設定（今回の設定では、`./dist/meta/licenses.txt`というファイルが作成される）

※`excludedPackageTest`を利用すれば、LicenseWebpackPluginがチェックできなかったライブラリ（license.txtがないライブラリ）は自分自身でライセンスを確認して、チェックの対象外にするという事もできるだろう。

```js
module.exports = {
	configureWebpack: {
		plugins: [
			new LicenseWebpackPlugin({
				...
				excludedPackageTest: (packageName) => ['@fontsource/roboto'].includes(packageName),
				...
			})
		]
	}
};

```

※今回利用していないオプションについては、[公式](https://github.com/xz64/license-webpack-plugin/blob/master/DOCUMENTATION.md)に詳細が書かれている。

## まとめとして
今回はwebpackを利用している場合に、依存ライブラリのライセンスチェックを行う方法についてみてきた。Node.jsの時とは違い、既存のbuild処理の中にライセンスのチェックが組み込めるのでより簡単だった。（Node.jsでもwebpackを利用してトランスパイルをする事はあるが（[Node.jsでimport・export（ES6の構文）を使えるようにwebpack × Babelの設定をやってみた](https://note.com/shift_tech/n/n77562e0926e3)を参照）、その場合依存ライブラリ（node_modules）をbuild時にbundleする必要がないため（[Webpack node modules externals](https://github.com/liady/webpack-node-externals)を参照）、今回のようなwebpackでbuildする際にライセンスのチェックまでやるという事ができなかった）。

※React等でもwebpackを使っていれば同じようにライセンスのチェックができるが、create-react-appでプロジェクトを作るとwebpack周りは隠蔽されるので少し勝手が違ってくるみたい（[create-react-appで生成した環境でejectせずにWebpackのプラグインを試したい](https://blog.utgw.net/entry/2021/09/28/181413)などを参照）。