不是来自 webpack 的内容是从/foo 提供的 [英] Content not from webpack is served from /foo

问题描述

我无法启动这个服务器，我阅读了webpack-dev-server文档.

I just can't start this server, I read the webpack-dev-server docs.

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

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

The sample code looks simple,but I just can't start this server successfully,no matter what I tried,different folder,it just can't get the content!!!Am I missing something?

任何帮助将不胜感激.

输出:

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/:

The first problem is that you're serving the content from assets/ but you don't have that directory, you have public/assets/ and that's not even what you want, because your index.html is in public/. So what you really want is setting the contentBase to 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.

Now you'll still have the problem that webpack-dev-server doesn't serve the correct bundle. It might work, but that is because you have the bundle on your actual file system, which will be used instead of the bundle that webpack-dev-server would serve from memory. The reason for that is that webpack-dev-server only serves from memory if the correct path is hit. Assuming you're including assets/bundle.js in your index.html, that would match the path, but you're setting publicPath: "/assets/", so it will be looking for /assets/ and adds the filename to it (which is assets/bundle.js, in reality the bundle is served from /assets/assets/bundle.js.

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

To fix that you can either remove the publicPath option (setting publicPath: "/" has the same effect).

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

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

Or you can change the output path to /public/assets/ and the filename to just bundle.js. This will also make your chunks go into the assets directory, which is probably what you want anyway.

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

注意:publicPath 会影响一些改变资源 URL 的加载器.

Note: publicPath affects some loaders that change the URL of assets.

这篇关于不是来自 webpack 的内容是从/foo 提供的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！