はじめに

名前はよく聞くけど直接使ったことなかったwebpack。
いい加減ちゃんと勉強してみようと思った回。
簡単なアプリを作って動かすとこまで。

TL;DR

webpackとは

複数のファイルをまとめてくれるモジュールバンドラー。
よく使われるのはJS(TS)を1つのファイルにまとめたりで使われてる印象。
ちなみにTypeScriptのトランスパイルにはデフォルトのtscがあるが、
複数のファイルを纏められない(ES Modules(import,export)をまとめる機能が無い)からwebpackを使うっぽい。

インストール

必要なものをインストールしておく。
お好みで-gなり、-Dなりを付けてください。

npm install webpack webpack-cli typescript ts-loader

ディレクトリ構成

以下のファイルとフォルダを作成する。

src: ソースファイルを入れておく用
tsconfig.json: typescript用(中身は後述)
webpack.config.json: webpackの設定用(中身は後述)

作った結果は下記の通り。

.
├── package.json
├── src
├── tsconfig.json
└── webpack.config.js

アプリ作成

の前に……

先程作ったtsconfig.jsonとwebpack.config.jsの中身を記載する。

// tsconfig.json
{
  "compilerOptions": {
    "sourceMap": true,
    "target": "es5", // TSはECMAScript 5に変換
    "module": "es2015" // TSのモジュールはES Modulesとして出力
  }
}

// webpack.config.js
// output.pathに絶対パスを指定する必要があるため、pathモジュールを読み込んでおく
const path = require('path');

module.exports = {
  // モードの設定、v4系以降はmodeを指定しないと、webpack実行時に警告が出る
  mode: 'development',
  // エントリーポイントの設定
  entry: './src/main.ts',
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader'
      }
    ]
  },
  resolve: {
    extensions: [
      '.ts'
    ]
  },
  // 出力の設定
  output: {
    // 出力するファイル名
    filename: 'bundle.js',
    // 出力先のパス（v2系以降は絶対パスを指定する必要がある）
    path: path.join(__dirname, 'output')
  }
};

アプリを作る

これでTypeScriptをビルドする準備ができたのでアプリを作っていく。
以下用に必要なファイルを作成していく。 * index.html: 表示するHTML * src/main.ts: メインとなるts。webpack.config.jsに書いたやつ * src/sub.ts: main.tsで読み込まれるts

ここまでのフォルダ構成は下記の通り。
作成したファイルの中身を入れていく。

.
├── index.html
├── package.json
├── src
│   ├── main.ts
│   └── sub.ts
├── tsconfig.json
└── webpack.config.js

index.html

<!doctype html>
<html>
<head>
    <title>こんにちは変換器</title>
    <meta charset="utf-8"/>
</head>
<body>
    <script src="./output/bundle.js"></script>
</body>
</html>

main.ts

import { Sub } from './sub';

class Main {
    private sub: Sub
    constructor() {
        this.sub = new Sub();
        const body = document.getElementsByTagName('body');
        const element = body.item(0);
        const div = document.createElement('div');
        div.innerHTML = '「こんにちは」を他言語に変換します。<br>好きな言語を入れてください。<br>※ちなみに対応しているのは日本語、英語、スペイン語、ドイツ語です。<br>';
        const input = document.createElement('input');
        input.id = 'country'
        const button = document.createElement('button');
        button.textContent = '変換';
        button.addEventListener('click', () => {
            this.transtrationGreeting(document.getElementById('country')['value']);
        });
        div.appendChild(input);
        div.appendChild(button);
        element.appendChild(div);
    }

    public transtrationGreeting(country: string) {
        const addDiv = document.createElement('div');
        addDiv.innerHTML = `こんにちはを${country}で言うと${this.sub.hello(country)}`;
        document.getElementsByTagName('body').item(0).appendChild(addDiv);
    }
}

const main = new Main();

sub.ts

export class Sub {
    private greeting = {
        '日本語': 'こんにちは',
        '英語': 'Hello',
        'スペイン語': 'Hola',
        'ドイツ語': 'Hallo'
    }

    constructor () { }

    public hello(country: string) {
        return this.greeting[country];
    }
}

アプリをビルドする

ビルドは簡単。webpackだけでOK。
webpack.config.jsに書いたとおり、outputフォルダにbudle.jsが生成されるはず。
ここまでのフォルダ構成は下記の通り。

.
├── index.html
├── output
│   └── bundle.js
├── package.json
├── src
│   ├── main.ts
│   └── sub.ts
├── tsconfig.json
└── webpack.config.js

ビルドが通れば、index.htmlを開くとアプリが動く。
アプリは超絶適当なので内容は割愛。htmlに内容書けっていう内容。

まとめ

とりあえずTypeScriptだけで使った場合についてやってみた。
実際にはTSだけなんて無いと思うから、今度はReactなりVueなりと合わせて使ってみようかな。
ちなみに作ったものはここに置いた。
アプリはこっち。

水無瀬のプログラミング日記

プログラムの勉強した時のメモ

TypeScriptをwebpackでビルドしてみる