TypeScript環境でwebpackを使用するメモ

##webpackの利点
ばらばらのファイルを一つにすることで、速度を速めることが出来ます。一つのプロジェクトには、規模が大きくなるほどコードの量が多くなり、役割ごとに異なるファイルに分割していきますね。分割していったファイルが呼び出されるごとにHTTPリクエストが発生します。HTTPリクエストがたくさん発生するとその分重くなってしまいます。そこで、webpackの登場です。webpackにより、一つのファイルに束ねることで、HTTPリクエストの回数を減らすことができ、よりスピーディーになります。

##TypeScript・webpackの導入
・前提
Node.jsのインストールが完了している

###TypeScriptの環境を作る
まずは作業するためのディレクトリを作ります。

```
mkdir typescript-project
cd typescript-project
```

npm installを使えるようにするために、npm initを実行します。(npmは、Node Package Managerの略だそうです！)このあと、いくつか質問が聞かれますが、全てEnterを押せば、デフォルトになります。質問が消えるまでエンターキーを連打？してください笑

```
npm init
```

これで、npm installが使えるようになりました。package.jsonというファイルが新たにできましたね。どんなライブラリをインストールしたかなどをpackage.jsonで見ることが出来ます。次に、サーバーを立ち上げるためにlite-serverをインストールします。

```
npm install --save-dev lite-server
```

この--save-devは、ローカルインストールをするという意味です！インストールが終わったらpackage.jsonを見てみて、

```
 "devDependencies": {
...,
    "lite-server": "^バージョン"
...,
}
```

となっていれば、インストール完了です！また、この際に`node_module`もディレクトリの中に作成されていますね。これは、npmでインストールした開発に必要なライブラリなどのバージョンの依存関係のインストール先です。先ほど、`lite-server`をnpmでインストールしたためにできたんですね。

次に、`lite-server`の設定を行いましょう。`package.json`を開いてください。そして、以下のように付け加えてください。

```
"script"{
    "test": "........",
    "start": "lite-server",
}
```

これで、`npm start`というコマンドでサーバーを立ち上げることが出来ます。


次に、`.ts`ファイルを`.js`ファイルに変換するのに便利なコマンドを紹介します。`tsc ファイル名`でもコンパイルすることができるのですが、コードを編集して保存をするたびにコンパイルを行わなければなりません。それを解消するために、ウォッチモードを利用します。これを利用することで、保存するのと同時にコンパイルされ、ブラウザに反映されます。
ウォッチモードを使うには、`-w(--watc)`をつければOKです。

```
tsc ファイル名 -w または--watch
```



また、ファイル名をいちいち記述するのも面倒ですし、複数のファイルをコンパイルしたいことが大半だと思うので、ディレクトリにある`.ts`ファイルをまとめてコンパイルする方法も紹介します。

まず、複数のファイルをコンパイルさせるために、「このディレクトリ下に`ts`ファイルがあるよ」ということを宣言します。

```
tsc --init
```

今までは、`tsc ファイル名`でコンパイルしていましたが、以下のコマンドでまとめてコンパイルされるようになりました。先ほど紹介した`-w`も掛け合わせて行きましょう。

```
tsc -w
```
これで以前よりも楽にコンパイルをすることができます。
コンパイルしたら、別の新しいターミナルを開いて、サーバーを起動してみます。

```
npm start
```

TypeScriptの環境が整いました。



###webpackの環境を整える

まずはwebpackをインストールしましょう。

```
npm install --save-dev webpack webpack-cli webpack-dev-server typescript ts-loader
```

webpackをインストールしたら、`package.json`を開いて、バージョンが表示されているかを確認してください。`npm start`でサーバーを起動する際に、`webpack-dev-server`を起動します。その設定と、ビルドの設定を行います。

```package.json
....省略
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve",
    "build": "webpack"
  },
"author":  ......
```

次に、`webpack`の設定ファイルを配置します。`package.json`や`tsconfig.json`などと同じ階層に、`webpack.config.js`というファイルを作成してください。ファイル名は必ずこの名前にしてください。なぜかというと、webpackがこの名前のファイルを探すからです。
`webpack.config.js`には以下のように記述しました。

```webpack.config.js
//node.jsでmoduleをimportするための構文
const path = require('path')


module.exports ={
//開発時のモード
    mode: "development",
    entry: './src/app.ts',
    devServer: {
        //contentBase: path.join(__dirname,'dist'),
        open: true,
      //default   port:8080
        port: 3000,
        publicPath: "/dist/"
    },
    output:{
        filename: 'bandle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: 'dist',
    },
    devtool: 'eval',
    module:{
        //どのloaderで処理するんか
        rules:[
            {
                //.tsを指定する
                test: /\.ts$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    //importされたmoduleをどのように解決するかを指定する
    resolve: {
        extensions:['.ts', '.js']
    }
}
```

公式ドキュメントに他にもいろいろ書かれています。`webpack.config.js`の設定まで終わったら、`npm run build`をコマンドラインでたたいてみます。すると、`bandle.js`というファイルが出来ていると思います。この`bandle.js`がwebpackによって一つにまとめられたファイルになります。ですので、`index.html`に挿入する際は、

```
<script src="bandle.js" type="module"><script>
```

としてあげてください。

ここまで終わったら`npm start`でサーバーを起動してみます。

いかがだったでしょうか。私自身、学び始めたばかりのため、至らない部分があると思います。何か間違いやご指摘がありましたらコメントいただけるとありがたいです。