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

在使用React将其切换到Typescript之前（我只在Webpack上使用React，然后决定使用Typescript，react和webpack），它将div毫无问题地添加到根div中，我希望得到它做同样的事情，但是现在只加载index.html和<div id="root"></div>

的<script src="../dist/bundle.js"></script>页面

Answer 1

好的，原来这只是一个简单的问题。我猜index.html需要和bundle.js在同一个目录中。将index.html移到dist后，它就可以正常工作了。

React，Typescript和Webpack向页面添加bundle.js的问题

1 个答案: