javascript - React 和 Webpack : Loading failed for the <script> with source http://localhost:8080/app/bundle. js

Question

我是 reactjs 的新手。我尝试配置与包括 index.js(包含 console.log())在内的基本索引页面的 react ，但是当我尝试运行服务器时，index.html 正确显示但 bundle.js 未加载。我搜索了很多，但没有得到正确的答案，有人可以帮助我吗。

我的 webpack.config.js 是

    // Webpack config js.

var webpack = require("webpack");
var path = require("path");

var DIST_VAR = path.resolve(__dirname, "dist");
var SRC_VAR = path.resolve(__dirname, "src");


var config = {
    entry : SRC_VAR + "\\app\\index.js",
    output: {
            path: DIST_VAR + "\\app\\",
            filename: "bundle.js",
            publicPath : "\\app\\",
    },
    module: {
            rules: [
                {
                    test: /\.js?/,
                    include: SRC_VAR,
                    loader: "babel-loader",
                    query: {
                        presets: [ "react" , "es2015" , "stage-2"]
                    }
                }
            ]
    }

};

module.exports = config;

控制台中显示错误:源“http://localhost:8080/app/bundle.js 加载失败” ”。

编辑:

已添加文件夹列表..文件夹路径列表卷序号为BE9C-4E51

C:.
|   package-lock.json
|   package.json
|   webpack.config.js
|   
+---dist
|   |   index.html
|   |   
|   \---app
|           bundle.js
|           
+---node_modules
|    <Here the node_modules>
\---src
    |   index.html
    |   
    \---App
            index.js

Answer 1

我会在没有看到您的项目文件夹结构的情况下做出一些假设。 看起来它可能是您的 publicPath。除非那是你想要的，否则/app 文件夹不应该是可见的，因为你的控制台显示“localhost:8080/app/bundle.js”，这意味着它正在寻找“project-root/src/app/app/bundle.js”。 js"而不是 "project-root/src/app/bundle.js"

在 webpack 文档中，他们告诉您默认使用根目录 '/' 并查看我自己的 webpack 文件，这也是我当前设置的。

引用: https://webpack.js.org/guides/public-path/

编辑:这是一个使用 Webpack 3 的示例。版本 4 刚刚发布，这将不起作用，所以如果您使用的是 Webpack 4，我会小心从哪里获取配置示例。

const webpack = require('webpack');
const path = require('path');

module.exports = {
    plugins: [
      // new webpack.NamedModulesPlugin(),
      // new webpack.HotModuleReplacementPlugin()
    ],
    context: path.join(__dirname, 'src'),
    entry: [
      //  'webpack/hot/dev-server',
      //  'webpack-hot-middleware/client',
      //  'babel-polyfill',
      //  'history',
      './index.js'
    ],
    output: {
      path: path.join(__dirname, 'www'),
      filename: 'bundle.js',
      publicPath: '/'
    },
    module: {
      loaders: [{
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: ['react-hot-loader/webpack', 'babel-loader']
      }],
      resolve: {
        modules: [
          path.join(__dirname, 'node_modules'),
        ],
      },
    };