This is a image

実行するコマンド

下記の3つのコマンドを実行することで、TypeScriptのシンプルなボイラープレートが得られます。

$ npm init -y
$ npm i -D webpack webpack-cli @webpack-cli/init
$ npx webpack-cli init

やっていること

npmでプロジェクトを初期化した後に@webpack-cli/initを使用しています。これはTUI(Text User Interface)によるwebpackプロジェクト作成ツールです。これにより、質問に回答する形式でwebpackによるTypeScriptプロジェクトが作成することができます。手入力でwebpack.config.jsファイルを作成することなく、npm初期化時のように対話形式でプロジェクト作成が可能となります。

得られるもの

下記のディレクトリ構造が作られます。

|   package.json
|   .yo-rc.json
|   tsconfig.json
|   webpack.config.js
+ src/
|   index.ts
+ node_modules/

以上でTypeScriptプロジェクトのシンプルなボイラープレートは完成です。 webpack-dev-server をスクリプトで実行すれば、すぐにコーディングに移れます。 またwebpack-cliの初期化の際にビルド先ディレクトリの登録や、自動でHTMLファイルを作成するhtml-webpack-plugin1のインストール・設定も完了するため、ビルドもすぐに実行できます。

詳細1: webpack-cli @webpack-cli/init について

公式を参照。 この2つを使用することでwebpack.config.jsファイルをTUI(Text User Interface) を経由して作成することができます。また、TypeScript開発に必要となるts-loaderwebpack-dev-serverも自動でインストールすることができます。

initを実行することでTUIが起動し、以後は質問に回答していくことで、お好みのボイラープレートを用意できます。質問内容は下記の通りです。

? Will your application have multiple bundles? No
? Which will be your application entry point? src/index
? In which folder do you want to store your generated bundles? dist
? Will you use one of the below JS solutions? Typescript
? Will you use one of the below CSS solutions? SASS

上記について回答することでwebpack.config.jsが作成されます。また下記のパッケージがインストールされます。

+ babel-plugin-syntax-dynamic-import@6.18.0
+ style-loader@0.23.1
+ sass-loader@7.1.0
+ css-loader@2.1.1
+ node-sass@4.12.0
+ ts-loader@6.2.1
+ webpack-cli@3.3.9
+ html-webpack-plugin@3.2.0
+ webpack-dev-server@3.9.0
+ webpack@4.41.2
+ typescript@3.5.3

詳細2: 作成されるwebpack.config.js

@webpack-cli/init を実行することで下記のconfig.jsが作成されます。Entryやloader、distributionディレクトリについてはTUIによる初期化時に選択した回答内容によって変更させることが可能です。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
	mode: 'development',
	entry: './src/index.ts',
	output: {
		filename: '[name].[chunkhash].js',
		path: path.resolve(__dirname, 'dist')
	},
	plugins: [new webpack.ProgressPlugin(), new HtmlWebpackPlugin()],
	module: {
		rules: [
			{
				test: /.(ts|tsx)?$/,
				loader: 'ts-loader',
				include: [path.resolve(__dirname, 'src')],
				exclude: [/node_modules/]
			}
		]
	},
	...
};

このコードを見ていただければ、すぐにコードを描き始めてビルドすることが可能であることがわかると思います。

補足

これだけでコード作成を始められますが、その他設定しておいた方が良いことを補足します。

  • tsconfig.json を 編集する

    • webpack-cliの初期化時にtsconfig.json は作成されますが、作成されるファイルは必要最低限の記述に限られています。そのため"sourceMap": trueのような、必要となる記述がされていない可能性があります。tscコマンド($ tsc --init)を使用して新たにファイルを作り直すなど、追加で設定が必要になるかもしれません。
  • webpack.config.js にSassの設定を追加する

    • webpack-cliの初期化時にsass-loaderやscss-loaderが作成されますが、これらの設定は(なぜか)webpack.config.jsに割り当てらられていません。こちらを参考に追記する必要があります。
  • 本番環境用にwebpack設定ファイルを用意

    • webpack-cli初期化時に作成されるconfigファイルはmode: 'development'と記述があるように開発環境用を想定して作成されます。こちらにあるように、本番環境用として別にprod.config.jsといった名前のファイルを作成すると良いかもしれません。

備忘録

  • コンパイルをes2015にするとTree Shakingを有効化できる
    • エクスポートしたモジュールのうち、使用(インポート)していない物をビルドから省いてくれる機能
    • 公式にまとまっている
    • こちらの記事でもおすすめされている

おわりに

ReactやVueと組み合わせてTypeScriptを使用するかもしれません。その場合、例えばVueであれば、Vue-CLIを使用することで@webpack-cli/initを使用せずともTypeScript環境を作成することができます。またVue CLIを使用することでVuexといったエコシステムも同時にインストールできます。可能であればこちらが望ましいです。Reactにも同様の導入ツールがあるようですfacebook/create-react-app。これらツールも日々変化しています。状況に応じて適切なツール選択が必要です。

生成されるファイルをアップしました。詳細はこちらを確認ください。


  1. [https://github.com/jantimon/html-webpack-plugin]: html-webpack-pluginの詳細について [return]