webpackの役割を知って導入しよう

Webpackとは、Javascriptモジュールハンドラーです。これだけでは何のことかわからないと思うので、解説していきます。

役割

Webpackは、複数のJavascriptや依存関係のあるモジュールを全部うまいことなんとかしてくれて、たった1つのjsファイルにまとめてくれるものです。その際、どのようにしてまとめるかのルールを書くことができます。

主に、ブラウザで読み込むjsファイルを生成するために利用します。

次の例を見てみましょう。npm i vueして、このようなコードを書いたとします。

import Vue from "vue";

new Vue({
    // ...
});

さて、このままではブラウザ上では利用できません。ブラウザからはvueがどこにあるのかわからないためです。node_modulesをアップロードしても、ブラウザから利用できるようにはなっていません。

そこで、Webpackがうまいことその辺の依存関係を解決して、1つの動作するjsファイルを生成してくれます。そのファイルであれば、ブラウザからそれを読み込むだけで動くというわけです。

CやJavaなどで、プログラムを書いた後、実行するためにコンパイルするのと似た考え方です。 (勿論これらは機械語等になるので厳密には異なりますが)

npm i -D webpack webpack-cli

で終わりです。実際に動作させるときはすでにビルド済みのjsファイルなため、-Dオプションありで問題ありません。

npmの導入については、下のページを確認してください。

Webpackは、複数のJavascriptや依存関係のあるモジュールを1つにまとめてくれるものです。Node.jsとnpmを活用したアプリをブラウザで動作させるには、モジュールバンドラは必要不可欠です。

次からは、実際にWebpackを使ってブラウザで利用できるjsファイルを作成していきます。