2. 環境構築

Tweet

webpackの使い方

前ページで、tscコマンドを使ってビルドする方法について説明しました。
しかし、複数のjsファイルをすべて配布するのは使い勝手が悪いです。
前ページで言えば、app.jsとsample.jsを配布しないと、使えません。
これが10ファイル、100ファイルで作るとなると、配布するときに大量のファイルを配布することになります。

C言語で言えば、オブジェクトファイルが生成されているだけの状態で、まだ実行ファイルが生成されていないのと同じような状況です。

複数のjavascirptファイルを一つのファイルにまとめて、配布しやすくするのがwebpackです。

まず、webpackをインストールしましょう。
以下のコマンドを実行してください。webpackをグローバルにインストールします。

npm install webpack -g

次に、カレントディレクトリにwebpack.config.jsを作成してください。
webpack.config.jsには次の内容を記述してください。
このファイルが、リンカーの設定ファイルになります(C言語の人向け)。

const path = require('path');

module.exports = {
  // モードの設定、v4系以降はmodeを指定しないと、webpack実行時に警告が出る
  mode: 'development',
  // エントリーポイントの設定
  entry: './dist/app.js',
  // 出力の設定
  output: {
    // 出力するファイル名
    filename: 'bundle.js',
    // 出力先のパス（絶対パスを指定する）
    path: path.join("C:/Users/konishi/typescriptSample", 'output')
  }
};

7行目で、mainとなるソースを指定します。
11行目がすべてのjsファイルを一つにまとめたファイルです(C言語なら実行ファイルと解釈してもOK)。
13行目は出力先を指定します。ここではoutputディレクトリをC:/Users/konishi/typescriptSampleの下に作成します。
このoutputパスの下に11行目で指定したbudle.jsが作成されます。

ファイルの状態を以下に記します。

C:.
│  tsconfig.json
│  webpack.config.js
│
├─dist
│      app.js
│      sample.js
│
├─output
└─src
        app.ts
        sample.ts

もし、distの下にjsファイルがない場合は、tscコマンドを実行してください。
この状態で、次のコマンドを実行します。

cd C:\Users\konishi\typescriptSample
webpack

実行すると、outputディレクトリが作成され、bundle.jsファイルが生成されています。

C:.
│  tsconfig.json
│  webpack.config.js
│
├─dist
│      app.js
│      sample.js
│
├─output
│      bundle.js
│
└─src
        app.ts
        sample.ts

bundule.jsにはapp.jsとsample.jsが合体した、一つのファイルになっています。
試しに以下のコマンドを実行してみましょう。

cd C:\Users\konishi\typescriptSample\output
node bundle.js

カレントにsample.jsやapp.jsがなくても実行されることが確認できます。

まとめ

ここまでで、いろいろなコマンドや設定ファイルが出てきて混乱しますが、C言語やpythonを例にまとめると、表2の関係があります。

表2 コマンドや設定ファイルのまとめ

このように理解すると、それぞれが何をやっているのか、わかると思います。