node.jsのwebpack入門

node.jsのwebpack入門

node.jsにはwebpackという複数のjsをバンドル(束ねてくれる)してくれるモジュールが存在します。

有名なバンドラでいうと、Browserify(ブラウザリファイ)などがあります。

a.js,b.jsというファイルが存在し、main.jsでa.js,b.jsをrequireしているとします。

この関係は、main.jsはa.js,b.jsと依存関係にある、と言います。

この依存関係を解決してくれるのがwebpackです。

プロジェクトを作るには、「npm init」を参照してください。(package.jsonが作成されます。)

webpackをインストールする

次にwebpackをインストールします。

package.jsonの11~13行目が追加されたと思います。

webpack.config.jsの作成

バンドルする(複数のjsファイルを一つのjsにする)には、webpack.config.jsというファイルを作成する必要があります。

プロジェクト直下に配置するのが通常かと思います。以下、webpack.config.jsのひな形です。

entryとは

entryで設定するファイルは、各ファイルの依存関係の大元のファイルを指定します。

今回はmain.jsでa.js,b.jsをrequireしているので、エントリポイントはmain.jsとなります。

outputとは

outputで設定するのは、バンドルするファイル名などを設定します。

pathとは

pathはバンドルしたjsファイルの配置先です。

filenameとは

filenameはバンドルしたjsファイル名となります。

webpackコマンドを実行する

webpackコマンドを実行するには色々手法がありますが、今回はpackage.jsonのscriptで実行してみます。

package.jsonの8行目を追加します。

これで、npm run bundle というコマンドが実行できるようになります。

以下、実行結果です。

アウトプットとして、dist\bundle.jsが作成されます。

htmlファイルでこのbundle.jsを読み込む

これで依存関係が解決されたbundle.jsというファイル(別に名前は任意です)が作成されました。

ちなみにa.js,b.js,main.jsはそれぞれ以下の通りとします。

a.js

b.js

main.js

index.html

このbundle.jsというファイルを例えば、上記のようにindex.htmlで読み込めば以下のように表示されます。

node.jsのwebpack入門

webpack.config.jsの[name]

webpack.config.js内に[name]が指定できます。entryをJSON形式で記述すると、そのキーが[name]にマッピングされて置換されます。entryがJSON形式でない場合は、[name]はmainで置換されます。

上記のように設定すると、prod.bundle.jsというファイルが作成されます。

node.jsのwebpack入門

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA