不是来自 webpack 的内容是从 /foo 提供的

IT技术 reactjs webpack webpack-dev-server
2021-04-15 20:02:05

我只是无法启动此服务器,我阅读了webpack-dev-server 文档

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

包.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
4个回答

第一个问题是您正在提供内容,assets/但您没有该目录,您拥有public/assets/并且甚至不是您想要的,因为您index.htmlpublic/. 所以你真正想要的是设置contentBasepublic/

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

现在您仍然会遇到webpack-dev-server无法提供正确捆绑包的问题。它可能会起作用,但那是因为您在实际文件系统上有这个包,它将被用来代替webpack-dev-server从内存中提供的包原因是webpack-dev-server只有在正确的路径被命中时才从内存中提供服务。假设你包括assets/bundle.js你的index.html,这将匹配路径,但你的设置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/
2021-06-01 20:02:05
那是服务器路径,它是从 提供的/,在那种情况下就是http://0.0.0.0:8080/它不会显示内容来自何处,而是显示您可以请求它的位置。
2021-06-02 20:02:05

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

通过更改为 3.4.0,它也对我有用。有人知道这背后的原因吗?
2021-05-29 20:02:05
这对我有用!任何人都可以解释为什么?
2021-06-15 20:02:05

如果您正在使用 webpack 开发服务器^v4.0.0(在本文发布时仍然是 RC),则该contentBase属性将更改为static.

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

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

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

通过更改为 3.4.0,它也对我有用。有人知道这背后的原因吗?
2021-06-15 20:02:05