不是来自 webpack 的内容由 /foo 提供答案

【问题标题】：Content not from webpack is served from /foo不是来自 webpack 的内容由 /foo 提供
【发布时间】：2017-07-31 10:11:23
【问题描述】：

我只是无法启动此服务器，我阅读了webpack-dev-server docs。

devServer: {
  contentBase: path.join(__dirname, "dist"),
  compress: true,
  port: 9000
}

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

任何帮助将不胜感激。

输出：

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

【问题讨论】：

标签： reactjs webpack webpack-dev-server

【解决方案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 ，实际上捆绑包是从/assets/assets/bundle.js 提供的。

要解决此问题，您可以删除 publicPath 选项（设置 publicPath: "/" 具有相同的效果）。

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

或者您可以将输出路径更改为/public/assets/，并将文件名更改为bundle.js。这也将使您的块进入资产目录，这可能是您想要的。

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

注意：publicPath 会影响一些改变资产 URL 的加载器。

【讨论】：

你回答了我的疑惑，我可以看到内容，但是为什么输出还是webpack output is served from / Content not from webpack is served from ~/WebstormProjects/react_back/public/
这是服务器路径，它是从/ 提供的，在这种情况下是http://0.0.0.0:8080/。它不会显示内容的来源，而是您可以在哪里请求。

【解决方案2】：

这可能是 'react-scripts' 的问题，对我来说它不适用于 3.4.1 版本，我将版本设置为 3.4.0，它现在可以使用。打开 package.json 文件，更改“react-scripts”：“3.4.0”，如果是其他内容，或者您可以根据您的要求尝试不同的版本。但是这个问题似乎与“react-scripts”版本有关，所以你需要检查一下。

【讨论】：

更改为 3.4.0 也对我有用。有人知道这背后的原因吗？
这对我有用！谁能解释一下为什么？

【解决方案3】：

如果您使用 webpack 开发服务器 ^v4.0.0（在本文发布时仍是 RC），则 contentBase 属性将更改为 static。

devServer: {
   // ...
   static: __dirname + "/public/",
   // ...
},

变更日志：https://github.com/webpack/webpack-dev-server/blob/master/CHANGELOG.md#static

【讨论】：

【解决方案4】：

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

【讨论】：

更改为 3.4.0 也对我有用。有人知道这背后的原因吗？