こんにちは。ニッパチです。
先日業務でwebpackとはなんぞやとなったので調べていると別のことに気づいたのでそれについて書いていこうと思います。
webpackとは
まず最初にwebpackについて調べることになった経緯ですが、業務でtypescriptを使用していてビルド後ひとつのjsファイルになるのは
なぜなのかというのが気になり調べているとwebpackという単語に出会いました。
webpack（ウェブパック） とはモジュールバンドラー(module bundler) です。モジュールバンドラーとは、複数のモジュールの依存関係を解決して1つにまとめる、いわゆるバンドリング(bundling) するものであり、モジュールとはそれ単体というより、組み合わせて使う個々のプログラムのことです。
よくわかりませんが、htmlで読み込むjavascriptファイルをひとつにするということかな？
別の気づき
以前vue.jsに触れる機会があり、importやexport文を使用したソースファイルがありその時は「vue.jsのノリなんやろうな～」とぐらいにしか考えていませんでしたが、今回webpackについて調べているとよく業務等で使うクライアントのjavascriptでも使用できるとわかりました。
以下、従来との違いです。
var a = 'hello';
print(a);function print(val) { console.log(val); }上記の場合htmlで読み込むファイルは２つ。
これをimportを使って書き換えると
<script src="./file-a.js" type="module"></scrip>import { print } from "./file-b.js"
var a = 'hello';
print(a);export function print(val) { console.log(val); }主な変化としてhtmlでスクリプトを呼ぶ際はtype=”module”とすること、
file-b.jsで関数にexportをつけることです。
注意点はインポートできるのはクラスとメソッドだけということです。
感想
ずっと他人事のように思っていましたが、理解できてスッキリしました。