【Vue】エラー解決備忘録：TypeError: loaderContext.emitError is not a function

webpackで環境を作っている時に発生したエラーについて解決策を記録しておきます。

現象

Vueの設定をしてビルドした所、下記のエラーが発生しました。ビルド自体は正常に完了しました。

TypeError: loaderContext.emitError is not a function

ソース

ハブファイルの処理は次のように設定しています。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

//..

解決方法

モジュールの公式ページにも乗っていますが、html-webpack-pluginを読み込む場合は、{}で指定する必要があります。

webpack.js.org

const path = require('path');
// const HtmlWebpackPlugin = require('html-webpack-plugin');
const { HtmlWebpackPlugin } = require('html-webpack-plugin');

//..

モジュール読み込みのおさらい

requireもしくはimportでモジュールを読み込む事ができます。

`import`と`require`の違い

簡単に言うとモジュールの仕様です。モジュールの主要な仕様は２つあり、それぞれ対応した読み方をする必要がります。

仕様名	対応する読み込み関数	概要
ECMAScript	import	フロントエンドで動かすモジュールを読み込む
CommonJS	require	サーバーサイド（Node.js）で動かすモジュールを読み込む

webpackのビルドで読み込むモジュールですので、requireを使ったと言うことになります。
webpack.js.org

参考

qiita.com

{}の有無

requireで{}を囲むか、囲まないかの分割代入をするかしないかの違いです。

developer.mozilla.org

分割代入をする事で、読み込むモジュール内で指定しているAPIを個別で指定する事ができます。

インターフェイスの宣言

モジュールの関数、変数、クラスをexport宣言する事で、分割代入する事ができます。
developer.mozilla.org

TypeScript製のモジュールについて

（本題の元になった）html-webpack-pluginは、TypeScript製のモジュールです。
型の動的上書きをするためにdeclare class (クラス名)等の事もしています。
今回は触れませんがTypeScriptのモジュール周りについては下記が参考になります。

現象

ソース