中級者 - webpackの技術情報

webpackは、HTML, CSS(SASSなど), JavaScriptで作るWebサイト環境のビルドツールです。

元々は、1つのJavaScriptファイルにHTML, CSS, 画像などのリソースを全部入れて、Webサイトのリソースを1つのHTML(index.html)と1つのJavaScriptファイルだけにするものでした。

しかし今は、JavaScriptを対象のバージョンに変換するトランスパイル、SASSなどの高機能CSS作成言語のCSS変換など、Webサイト開発環境の総合ビルドツールになっています。

このようなツールはWeb開発の必須といっていいでしょう。そんなwebpackについて情報を発信します。

自分で情報を探しながらやっても、なかなかスムーズに答えにたどりつかない人向けです。

経験が足りないだけで、遅かったり、失敗しても自信をなくさなくていいです。いまは大きくなるために、技術を知って試す時期なので。

むしろたくさん悩んで、フリーズして、失敗してください。気がついたら最適な答えを出す力が自然と身についているでしょう。

webpack4, postcss-loaderのバージョンアップでエラー

webpackプラグインでは恒例の、バージョンアップのオプション変更でエラーが出ました。

postcss-loaderを3.x系から4.x系に変更すると『pluginsなんか知らん！』と出ます。

どうやらオプションの指定する場所が変わったらしい。

@babelでトランスパイルしているのにIE11でNodeList.forEach()が使えない。

なんで？ ...そうか、ポリフィルが必要だった。

ポリフィルはブラウザの種類やバージョンによって追加されたり変更・削除されたコードを補完するものです。

webpackおなじみの、プラグインのバージョンアップでのエラー対応です。

出るわ出るわのエラー三昧で笑けてきた。

（三昧はスシだけでいい。）

ビルドツールはあまり更新をしないから出るからしょうがないんだけど、webpack5に移行するためには一旦バージョン4で最新にする必要がある。

html-webpack-pluginのバージョン4.0.0から、拡張プラグインhtml-webpack-exclude-assets-pluginは使えません。

代替プラグインを使います。

webpackおなじみの、バージョンアップのオプション変更でエラーが出ました。

『removeComments, collapseWhitespaceなんか知らん！』と出たのですが、答えは『指定する場所が変わった。』です。

webpackプラグインのバージョンアップではおなじみの、オプション変更でエラーが出ました。

まぁこれが嫌でたまにしかバージョンを上げず、余計に出るんですが。

今回は、srcのファイルを何もせずそのままdistへコピーするCopyWebpackPluginです。

2 / 3