🦒 2022/03/14 今日の積み上げ
react webpack typescript
作成日： 2022/03/14
3

（2回目）【Techpit】React × TypeScript でマークダウンエディタを作りながらモダンなフロントエンド開発に入門しよう！

1章 : プロジェクトを作る

  • 1-5 webpack-dev-server を導入して開発効率を上げる【済】

見本とは少し設定を変更したので、、設定に時間がかかってしまいました。
webpackで使用するpath.join()とpath.resolve()の違いをあまり理解していなかったため、少し整理します。

path.join()

path.join('dist', 'js', 'index.js');

→/dist/js/index.js
単純結合に近く、正規化されるため"/"の有無は影響がない。

path.resolve()

path.resolve('dist', 'js', '/index.js');

→/index.js
絶対パスを返す。引数の後ろから順に処理され、"/"に当たった時点で絶対パスが生成されるためそこで処理が終了する。
webpackの出力先(output)は絶対パス(resolve)で指定する。

（補助教材）【Udemy】【世界で7万人が受講】Understanding TypeScript 日本語版

セクション3: TypeScript の設定とコンパイラ

  1. Source Map の利用～40. rootDir と outDir の設定（ソースフォルダと出力先フォルダの設定）まで
s.yoshiii