Webpack
複数のJSファイルを1つにバンドルする
できることが多すぎてよくわからない
ts→jsのコンパイル
JSのminify
SPA 用のエントリポイントを生成
css を js から読み込んだり
画像を base64 化しり
etc.
導入する
$ npm i -D webpack webpack-cli
ビルドする
$ yarn webpack
with TypeScriptのときにいつもいれるやつ
webpack
webpack-cli
webpack v4から必要になった
ts-loader
@types/webpac
webpack.config.tsをTSで書く
ts-node
$ yarn webpackでwebpack.config.tsを読み込むので必要
.tsを直接を実行するため
webpack.config.tsの設定項目
entry
webpackがビルドをする際のエントリーポイント
__dirname
output
bundleファイルをなんという名前で出力するか
path
ディレクトリ
filename
code:ts
output: {
path: path.join(__dirname, "dist"),
},
module
resolve
拡張子の解決など
以下のように書くことでimport文にの.tsを省略できる
code:ts
resolve: {
},
plugins
path
join
resolve
なんでTypeScriptにしたいだけなのに、webpackが必要になる？
設定ファイルの記法
webpack-node-externalsはなに？いる？
ts-loaderってなに？
webpackからTyepscriptをトランスパイルするためのwebpackのプラグイン