非Webpack的内容由/ foo提供

Question

我只是无法启动此服务器，我阅读了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

Answer 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只有在命中了正确的路径后才能从内存中提供服务。假设你包括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/，文件名更改为just
bundle.js。这也将使您的块进入资产目录，这可能仍然是您想要的。

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

注意：publicPath影响某些更改资产URL的加载程序。