webpackって何？
かつてのJavaScriptは、ファイル分割したコードや外部のライブラリを、index.htmlのscriptタグなどで読み込んでいました。
<body>
<script src="hoge.js"></script>
.
.
<script src="http://fuga.js"></script>
</body>
しかし、読み込むファイルが増えるにつれて、変数名が被ってしまう、通信環境によって読み込みに時間がかかるといった問題が起こります。
この問題の解決策として、複数のJavaScriptを適切に変換して一つのファイルにまとめる「バンドル」という手法が生まれました。webpackは、今最も主流なバンドラーであり、ReactやVue.jsといったフレームワークの内部でも利用されています！
webpackは、JavaScriptだけでなくCSSや画像などもバンドルでき、JavaScriptのさまざまな形式の依存関係に対応していたことから、現在では非常に人気のあるバンドラーとなりました。
近年のフロントエンド開発ではファイルを「モジュール」として分けて開発することがほとんどです。
module.exports, requireといったCommonJS形式の構文や、
export, importといったESModlesの構文を見たことがある人もいると思います。
webpackは、複雑に依存しあうモジュールも一つのJavaScriptファイルにまとめることができます。
どうやって使うの？
ここでは、具体的な使用方法というよりは、こんな感じで使うんだなというイメージを掴んでもらえればと思います。
※node.jsを使用するので、インストールしておいてください。
-
まず、作業用のディレクトリをVSCodeなどのエディタで開き、ターミナルを開きます。
（VSCodeの拡張機能によって画面は異なります。）
-
ターミナルに以下のコマンドを入力すると、
package.jsonというファイルができます。
npm init -y
- 続いて、以下のコマンドを入力します。これで、webpackをプロジェクトにインストールします。
npm install -D webpack webpack-cli
package.jsonの中はこんな感じ。devDependenciesの下にwebpackとwebpack-cliが入ります。
- srcディレクトリを作成し、その配下に
index.jsとhello.jsを作成します。
// import 文を使って hello.js ファイルを読み込む。
import { hello } from "./hello";
// hello.jsに定義されたJavaScriptを実行する。
hello();
// export文を使ってhello関数を定義する。
export function hello() {
alert("hello world!");
}
- これでwebpackを使う準備ができました。以下のコマンドを入力し、早速webpackを使用してみます。
npx webpack
webpackを使用することで、index.jsとhello.jsという二つのjsファイルの内容が、dist/main.jsにパフォーマンスが最適化された状態で出力されます。(出力されるファイル名や形式はカスタマイズできます。）
(()=>{"use strict";alert("hello world!")})();
このファイルの内容を解読できる必要はありません。あとは、このmain.jsをindex.htmlで読み込むだけです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<script src="dist/main.js"></script>
</body>
</html>
無事、hello world!が表示されるはずです。
Reactではどう使われている？
create-react-appでreactプロジェクトを作成すると、package.jsonには一見webpackの文字が見当たりません。webpackはReactのロジックの中に隠されていて、特に設定しなくても使えるようになっているようです。
内部では Babel と webpack を利用していますが、それらについて知る必要はありません。
(React公式 「新しいReactアプリを作る」より)
しかしながら、scriptsオブジェクトを見ると、react-scriptsというライブラリを使っていることがわかります。
node_modulesの中から、react-scriptsを探してみましょう。
ありました！
package.jsonにはwebpackの記述がありますし、configディレクトリ内にはwebpackの設定ファイルであるwebpack.config.jsがあります。
Reactプロジェクトを立ち上げると、react-scriptsを通じてwebpackがjsファイルを一つにまとめてくれるようですね！
npm run buildを実行すると、buildディレクトリができ、その中にバンドルされたjsファイルなどが生成されます。
reactで作られたコンポーネント等も最終的には純粋なjsファイルにまとめて変換され、それをbuildディレクトリのindex.htmlで読み込んで表示しています！
まとめ
近年のフロントエンド開発では、ファイルを「モジュール」として複数に分けて開発し、本番用にそれらを「バンドル」しています。Webpackは、多様なモジュールシステムへの対応、拡張機能を提供することで、Webアプリケーションのビルド全般をカバーすることができます。WebpackはReactやVue.jsなどのフレームワークにも使われており、今後もさらに進化していくことが予想されます！