###前提・実現したいこと
create-react-appで作成したプロジェクトで複数ページを実装したい。
- http://reactApp/ エントリー画面を表示
- http://reactApp/form1/ フォーム1画面を表示
- http://reactApp/form2/ フォーム2画面を表示
(ディレクトリ構成)
- ├─public
- │ ├─index.html ・・・ ①http://reactApp/ で表示したい画面(エントリーポイント)
- │ ├─form1
- │ │ └─index.html ・・・・ ②http://reactApp/form1/ で表示したい画面
- │ └─form2
- │ └─index.html ・・・・ ③http://reactApp/form2/ で表示したい画面
- └─src
- ├─index.js ・・・・ ①のコンポーネント
- ├─from1
- │ └─index.js ・・・・ ②のコンポーネント
- └─form2
-
└─index.js ・・・・ ③のコンポーネント
###発生している問題・エラーメッセージ
①はトランスパイルされたjavascriptを参照し、reactで画面描画できていますが、
②、③は画面が表示できていません。
(index.htmlがそのまま表示されている)
webpack.config.dev.jsで②、③の定義ができていないためだと思っていますが、
設定方法をご教示いただけますでしょうか
また、①の画面のindex.htmlでは、
<script type="text/javascript" src="/static/js/bundle.js"></script>
が自動的に出力されますが、どこで定義しているのでしょうか。
###試したこと
- npm run eject の実行
- webpack.config.dev.jsのentryに以下を設定
entry: {
module: './src/index.jsx',
module01: './src/form1/index.jsx',
module02: './src/form2/index.jsx'
}
結果:npm startでエラー
あなたの回答
tips
プレビュー