typeScriptにWebpackを使用する

5727 ワード
webpack TypeScript Node.js Node.js テキストリンク

※あくまで個人の学習ノートなので参考程度に

１.package.jsonを追加

npm init -y

package.jsonが作成される

2.webpackインストール

npm install --save-dev webpack webpack-cli

node_moduleのフォルダとpackage-lock.jsonが作成される。

※作成されるnode_moduleはgitにpushしない

3.webpack.config.jsをディレクトリに追加

webpack.config.jsはwebpackの設定ファイル

webpack.config.js
const path = require('path'); //requireはimportと同じ扱いでpathはnodejsがもっているモジュール

module.exports = {
  entry: './dist/main.js', //一番最初に読み込ませるjsファイル

  output: {    //生成したファイルをどこに格納するかを指定
    filename: 'bundle.js', //生成されるファイル名
    path: path.resolve(__dirname, dist), //生成されるファイルの格納ディレクトリ
  }
}

4.bundle.jsを作成

npm run build

bundle.jsが作成される。

5.HTMLファイルの記述変更

jsファイルの読み込み先を先ほど作成したbundle.jsに変更
（bundle.jsに全てのjsファイルのコードがまとまっているため）

index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="dist/bundle.js" defer></script>
</head>

以上で終了。

-----------ここからはやってもやらなくても良い-------------

・sourceマップにjsファイルを表示したい場合

1.現在の状態だと以下のように検証ツール上にはbundle.jsしか表示されていない。

2.webpackの設定ファイルにdevtool: 'inline-source-map'と追加する

webpack.config.js
const path = require('path');

module.exports = {
  entry: './dist/main.js',

  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, dist),
  },
  devtool: 'inline-source-map'  //この行を追加
}

3.再度buildすると以下のように変わる