Reactjs 非来自网页的内容由/foo提供

我只是无法启动这台服务器，我读了文件

示例代码看起来很简单，但我就是无法成功启动此服务器，无论我尝试了什么，不同的文件夹，它都无法获取内容！！！我错过什么了吗

任何帮助都将不胜感激

输出：

Project is running at http://0.0.0.0:8080/
webpack output is served from /assets/
Content not from webpack is served from ~/WebstormProjects/react_back/assets/

我的项目结构：

├── [drwxr-xr-x ]  src
│   └── [-rw-r--r-- ]  index.js
├── [drwxr-xr-x ]  public
│   ├── [-rw-r--r-- ]  index.html
│   ├── [drwxr-xr-x ]  assets
│   │   └── [-rw-r--r-- ]  bundle.js
│   └── [-rw-r--r-- ]  favicon.ico
├── [-rw-r--r-- ]  package.json
├── [-rw-r--r-- ]  npm-debug.log
├── [-rw-r--r-- ]  webpack.config.js

package.json

  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --devtool eval"
  },

webpack.config.js

module.exports = {
    entry: __dirname + "/src/index.js",
    output: {
        path: __dirname + "/public",
        publicPath: "/assets/",
        filename: "assets/bundle.js",
        chunkFilename: '[name].js'
    },
    devServer: {
        contentBase: __dirname + "/assets/",
        inline: true,
        host: '0.0.0.0',
        port: 8080,
    },
    module: {
        loaders: [
            {
                test: /\.(jpg|jpeg|gif|png|ico)$/,
                exclude: /node_modules/,
                loader: 'file-loader?name=[name].[ext]'
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ["es2016", "react", "env", "stage-2"]
                }
            }
        ]
    }
};

版本：

➜  node -v
v7.6.0
➜  webpack-dev-server -v
webpack-dev-server 2.4.1
webpack 2.2.1

---

第一个问题是，您提供的内容来自

assets/

，但您没有该目录，您有

public/assets/

，这甚至不是您想要的，因为您的

index.html

位于

public/

中。因此，您真正想要的是将

contentBase

设置为

public/

：

devServer: {
    contentBase: __dirname + "/public/",
    inline: true,
    host: '0.0.0.0',
    port: 8080,
},

现在您仍然会遇到

webpack dev server

无法提供正确的捆绑包的问题。它可能会起作用，但这是因为您在实际的文件系统上有捆绑包，它将被用来代替

webpack dev server

从内存提供的捆绑包。原因是

webpack dev server

仅在命中正确路径时从内存提供服务。假设您在

index.html

中包含

assets/bundle.js

，这将匹配路径，但您设置了

publicPath:“/assets/”

，因此它将查找

/assets/

，并将文件名添加到其中（即

assets/bundle.js

，实际上，bundle是从

/assets/assets/bundle.js

提供的

要修复此问题，您可以删除

publicPath

选项（设置

publicPath:“/”

具有相同的效果）

或者，您可以将输出路径更改为

/public/assets/

，将文件名更改为just

bundle.js

。这也将使您的块进入assets目录，这可能是您想要的

output: {
    path: __dirname + "/public/assets/",
    publicPath: "/assets/",
    filename: "bundle.js",
    chunkFilename: '[name].js'
},

---

注意：

publicPath

会影响一些更改资源URL的加载程序。

这可能是“react脚本”的问题，对我来说，它不适用于3.4.1版本，我将版本改为3.4.0，现在可以使用了。

---

打开package.json文件，并更改“react scripts”：“3.4.0”，如果是其他内容，或者您可以根据需要尝试不同的版本。但这个问题似乎与“react scripts”有关版本，所以您需要检查。

我也遇到了同样的问题，在将react脚本版本3.4.1更改为3.4.0后解决了。不知道为什么！

您回答了我的疑问，我可以看到内容，但为什么输出仍然是

网页包输出是从~/WebstormProjects/react\u back/public/

提供的在服务器路径上，从

/

提供服务，即在这种情况下

http://0.0.0.0:8080/

。它不显示内容来自何处，但显示您可以在何处请求内容。更改为3.4.0也对我有效。有人知道这背后的原因吗？更改为3.4.0也对我有效。有人知道原因吗d这个？这对我有用！有人能解释一下为什么吗？

output: {
    path: __dirname + "/public",
    filename: "assets/bundle.js",
    chunkFilename: '[name].js'
},

output: {
    path: __dirname + "/public/assets/",
    publicPath: "/assets/",
    filename: "bundle.js",
    chunkFilename: '[name].js'
},