importを使用しているTypeScriptで、変換して生成される複数のJavaScriptファイルを、WebPackで1つのJavaScriptファイルにまとめる方法 VisualStudioCode #TypeScript

TypeScriptを変換して生成される複数のJavaScriptファイルを、1つのJavaScriptファイルにまとめる方法

■ Node.jsをインストールする
https://nodejs.org/ja/

インスートルするのは、xx.xx.xx LTS　(推奨版)
xx.xx.xxは、バージョン数

■ TypeScriptをインストールする
コマンドプロンプトで、下記コマンドを実行する
npm install -g typescript

■ プロジェクトのフォルダを作成する

■ Visual Studio Codeで、プロジェクトのフォルダを開く

■ プロジェクトのフォルダのルートに、tsconfig.jsonファイルを作成する

tsconfig.jsonファイルの内容
{
    "compilerOptions": {
        "target": "es6",
        "module": "commonjs",
        "watch": true,
        "sourceMap": true,
		
		// TypeScriptがJavaScriptに変換されたファイルを保存するフォルダ名を指定。
        // 例として、javascriptとした。
		// tsconfig.jsonファイルを起点としたパスを指定する
		"outDir": "javascript"
    }
}

■ task.jsonファイルを作成する
[ターミナル] - [既定のビルドタスクの構成] - [tsc: ビルド]
.vscodeフォルダが作成されて、その中にtask.jsonファイルが作成される

■ プロジェクトフォルダのルートに、TypeScriptファイルを作成するtypescriptフォルダを作成する


■ TypeScriptファイルの例
typescript/index.tsファイル

import { Sub } from "./sub";
new Sub();


typescript/sub.tsファイル

export class Sub {
    constructor() {
        document.write("Sub");
    }
}

■ TypeScriptファイルをJavaScriptファイルに変換する
[Shift] + [Ctrl] + [b]でビルドする

ビルドが完了すると、
tsconfig.jsonファイルの"outDir"に指定したフォルダにJavaScriptファイルと、mapファイルが作成される
javascript/index.js
javascript/index.js.map
javascript/sub.js
javascript/sub.js.map


tsconfig.jsonファイルの"watch": trueに設定しているため、ビルドが監視モードになっているので、
ここでは一旦停止させる
[Ctrl] + [c]

バッチ ジョブを終了しますか (Y/N)?
で、yを入力する



■ Visual Studio Codeで新しいターミナルを起動する
[ターミナル] - [新しいターミナル]
カレントディレクトリが、プロジェクトフォルダのルートでターミナルが起動される

■ package.jsonファイルを作成する
ターミナルに、
npm init -y
と入力する

■ webpackと、webpack-cliと、webpack-dev-serverをインストールする
ターミナルに、
npm install --save-dev webpack webpack-cli webpack-dev-server
と入力する

※ 省略形
npm i -D webpack webpack-cli webpack-dev-server

インストールが完了すると、
・node_modulesフォルダ
・package-lock.jsonファイル
が作成される


■ package.jsonファイルを編集する
package.jsonファイルの"scripts"の箇所を下記のように記述する

{
  "name": "test3",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  
  "scripts": {
    "dev": "webpack --mode development && webpack-dev-server --mode development",
    "product": "webpack --mode production && webpack-dev-server --mode production"
  },
  
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
        "webpack": "^5.65.0",
        "webpack-cli": "^4.9.1",
        "webpack-dev-server": "^4.6.0"
  }
}

■ 複数のJavaScriptファイルを1つにまとめるファイルを出力するフォルダを作成する
プロジェクトフォルダのルートにdistフォルダを作成する

■ webpack.config.jsファイルを作成する
プロジェクトフォルダのルートに、webpack.config.jsファイルを作成する

const path = require('path');
module.exports = {
    // JavaScriptのメインファイル（エントリーポイント）
    entry: "./javascript/index.js",

    output: {
        //  ファイルを出力するフォルダ名
        path: path.join(__dirname, 'dist/js'),

　　　　 publicPath: "/js/", // これを定義すると、TypeScriptを編集し、セーブをしたタイミングでビルドした内容がブラウザに反映される

        // 出力ファイル名
        // このファイルが、複数のJavaScriptファイルが1つにまとまったファイルです
        filename: "bundle.js"
    },

    devServer: {
        // webpack-dev-serverのバージョン4.x.xからは、staticになった
        // ※ webpack-dev-serverのバージョンか3.x.xでは、contentBaseだった
        static: "dist",

        open: true
    }
};

■ ブラウザに表示させるためのindex.htmlを作成する
上記で作成したdistフォルダ内に、index.htmlを作成する

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <script src="js/bundle.js"></script>
</head>

<body>
</body>

</html>

■ webpackと、webpack-dev-serverを起動する
package.jsonファイルの"scripts"で指定した"dev":～～～～～～のコマンドを実行する

npm run dev

少々待つと、dist/jsフォルダ内に、bundle.jsが生成される
そして、webpackと、webpack-dev-serverが起動して、その後ブラウザが起動されindex.htmlが表示される
今回のサンプルでは、画面にSubと表示されます。

"dev":～～～～～～のコマンドは、開発時に使用します。

■ リリース用
リリース用のファイルを出力する場合は、package.jsonファイルの"scripts"で指定した"product":～～～～のコマンドを実行します。
npm run product
出力されるbundle.jsが、コメントや改行がない縮小されたファイルで出力されます


■ Visual Studio Codeビルドを監視モードで起動
[Shift] + [Ctrl] + [b]でビルド開始する
tsconfig.jsonファイルの"watch": trueに設定しているため、ビルドが監視モードになっているため
TypeScriptファイルを編集して、ファイルを保存すると自動でビルドされ、ブラウザに反映される

監視モードを停止するには、
[Ctrl] + [c]

バッチ ジョブを終了しますか (Y/N)?
で、yを入力する


[Ctrl] + [c]で監視モードを停止した後、再び監視モードを起動するには、
[Shift] + [Ctrl] + [b]