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
ts output: {
path: path.join(__dirname, "dist"),
filename: "[name].js",
},
module
resolve
拡張子の解決など
以下のように書くことでimport文にの .ts を省略できる
ts resolve: {
extensions: [".ts", ".js"],
},
plugins
path
join
resolve
なんでTypeScriptにしたいだけなのに、webpackが必要になる？
設定ファイルの記法
webpack-node-externalsはなに？いる？
ts-loaderってなに？
webpackからTyepscriptをトランスパイルするためのwebpackのプラグイン