Проблема с React, Typescript и Webpack, добавляющим bundle.js на страницу

Question

Когда я строю свой проект, он хорошо строится и создает файл bundle.js, однако при переходе на страницу в http://localhost:8080/ мне выдается предупреждение в консоли:

Loading failed for the <script> with source “http://localhost:8080/dist/bundle.js”.

Я действительно смущен этим, поскольку кажется, что все строится и запускается правильно.

Я прошел через каждую из этих страниц: 1 2 3 4 и попробовал то, что там показано, но ничего не изменилось.

Мой файл webpack.config.js:

"use strict"

const path = require('path');

module.exports = {
    entry: './App.tsx',
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, 'dist')
    },
    devServer: {
        publicPath: "/",
        contentBase: "./public",
        hot: true
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js']
    },
    devtool: "inline-source-map",
    module: {
        rules: [{
            test: /\.(ts|tsx)$/,
            use: 'ts-loader',
            exclude: /node_modules/
        },
        {
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader'
            ]
        }]
    }
};

tsconfig.json:

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es5",
    "jsx": "react",
    "allowJs": true
  },
  "include": [
    "App.tsx"
  ]
}

package.json

{
  "name": "project",
  "version": "1.0.0",
  "private": true,
  "main": "App.tsx",
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "@types/react": "^16.8.1",
    "@types/react-dom": "^16.0.11",
    "babel": "^6.23.0",
    "babel-loader": "^8.0.5",
    "css-loader": "^2.1.0",
    "react-hot-loader": "^4.6.5",
    "source-map-loader": "^0.2.4",
    "style-loader": "^0.23.1",
    "ts-loader": "^5.3.3",
    "tslint": "^5.12.1",
    "tslint-react": "^3.6.0",
    "typescript": "^3.3.1",
    "webpack": "^4.29.1",
    "webpack-cli": "^3.2.2",
    "webpack-dev-server": "^3.1.14"
  },
  "dependencies": {
    "awesome-typescript-loader": "^5.2.1",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-scripts": "2.1.3"
  },
  "scripts": {
    "start": "webpack-dev-server --hot --inline",
    "build": "webpack"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

App.tsx так же просто, как только я смогу заставить это работатьс помощью этого теста:

import * as React from "react";
import * as ReactDOM from "react-dom";

import "./App.css";

export interface Props {}
export interface State {}

class App extends React.Component<Props, State> {
  public render(): JSX.Element {
    return (
       <div className="test">
       </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

И для справки, если я упускаю что-то действительно простое, моя файловая структура выглядит следующим образом:

  project
  |- package.json
  |- package-lock.json
  |- tsconfig.json
  |- tslint.json
  |- webpack.config.js
  |- App.tsx
  |- App.css
  |- /dist
    |- bundle.js
  |- /public
    |- index.html
  |- /node_modules

Перед переключением на Typescript с помощью React (я использовал React только с webpack, а затем решил использовать typcript, реагировать и webpack), он добавлял div в корневой div безСью, и я надеюсь заставить его делать то же самое, однако сейчас он просто загружает страницу index.html только с <div id="root"></div> и <script src="../dist/bundle.js"></script>

Answer 1

Хорошо, оказывается, это была простая проблема.Я думаю, index.html должен находиться в том же каталоге, что и bundle.js.Как только я переместил index.html в dist, он работал без проблем.