webpack #001 – インストール&ビルド

By | 2017年7月21日

 

 

webpackは、複数のJSファイルを1つにまとめるビルドツールです。CSS等もJSに含めてビルドすることもできるようです。利用するときは、webpack単体で利用するかgulp等と組み合わせるかの判断が必要そうですね。

今回は、webpackをインストールしてビルドするところまでを試したいと思います。

 

まず、Node.jsでwebpackをインストールします。今回は最新版のwebpack3をインストールしてみます。

 

 

インストールが完了したら、package.jsonのscriptsの項目を書き換えます。

 

次に、ビルドをしてみたいと思います。今回は複数のJSファイルを統合します。

まず下記のような構造で実行ファイルを作成します。

 

sample01.js

 

sample02.js

 

main.js

 

webpack.config.js

 

ファイルの準備ができたらビルドします。

 

ビルドが成功すると、buildディレクトリに全てのJSが統合されたapp.jsが作成されます。

app.js

 

app.jsを読み込むindex.htmlを作成して実行してみます。sample01.jsとsample02.jsの内容が実行されているのを確認できます。

index.html

 

 

現在はgulpを利用しているのですが、環境によってはそろそろ(いまさら?)webpackも必要になってきているので導入していこうと思います。今回はwebpackをインストールしてビルドするところまで確認しました。