目次 はじめに 環境毎のWebPackを修正する 環境毎のCSSを作成する 定義したCSS定数を読み込む CSS定数を使用する方法 はじめに 以下の記事を参考に、環境定数を用意してください。 https://reigle.info/entry/2022/08/20/100000reigle.info 環境毎のWebPack…

目次 インポートのエイリアス化とは WebPackのエイリアス定義 TypeScript用のエイリアス定義 インポート ディレクトリのエイリアス ファイルのエイリアス インポートのエイリアス化とは 階層が深くなっていくと、importする際に「../../../../Hoge」のような…

目次 はじめに 難読化 難読化とは 難読化しない方法 難読化する方法 ソースマップ ソースマップとは ソースマップを表示する方法 ソースマップを表示しない方法 はじめに 以下の記事を参考に、DockerとWebPackを使用したプロジェクトを用意してください。 既…

目次 はじめに 環境毎のWebPackを修正する 環境定数をプロジェクト内で使用出来るようにする 環境定数を使用する はじめに 以下の記事を参考に、DockerとWebPackを使用したプロジェクトに環境毎のWebPackを用意してください。 既にプロジェクトがある場合は…

目次 はじめに package.jsonで環境を定義する WebPackの修正 はじめに 以下の記事を参考に、DockerとWebPackを使用したプロジェクトを用意してください。 既にプロジェクトがある場合は、適時読み替えてください。 reigle.info package.jsonで環境を定義する…

目次 はじめに Dockerの本番環境用意 package.jsonの内容を修正 webpack.config.jsの出力先指定 ビルド実行 ビルド後のファイルをローカルで実行 サーバーへのデプロイ はじめに 以下の記事を参考に、DockerとWebPackを使用したプロジェクトを用意してくださ…

目次 事前準備 WebPack 完成 スポンサードリンク (adsbygoogle = window.adsbygoogle || []).push({}); 事前準備 以下の記事の内容が完了している前提で本記事を記載しています。 まだの方は、以下から進めてください。 React(TypeScript)プロジェクトの作成…

目次 事前準備 Prettier ESLintの設定修正 コマンドでPrettierの整形を行う VSCodeでPrettierを実行する Prettierのルール設定 Prettierの除外ファイル スポンサードリンク (adsbygoogle = window.adsbygoogle || []).push({}); 事前準備 以下の記事の内容が…

目次 事前準備 ESLintの組み込み ESLintの設定ファイルに任意の設定を行う コマンドでESLintのチェックを行う VSCodeでESLintのチェックを起動する スポンサードリンク (adsbygoogle = window.adsbygoogle || []).push({}); 事前準備 以下の記事の内容が完了…

目次 前提 Reactのプロジェクト作成環境の用意 Reactプロジェクトに「TypeScript」の設定をしてプロジェクト作成 Dockerの組み込み 「docker-compose up」でエラーが出た場合 スポンサードリンク (adsbygoogle = window.adsbygoogle || []).push({}); 前提 N…