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

第一个问题是，您正在提供来自array:4 [▼ 0 => array:2 [▼ "img" => "Hydrangeas.jpg" "link" => "http://site.loc/1" ] 1 => array:2 [▼ "img" => "Koala.jpg" "link" => "http://site.loc/2" ] 2 => array:2 [▼ "img" => "Jellyfish.jpg" "link" => "http://site.loc/3" ] 3 => & array:2 [▼ "img" => "Tulips.jpg" "link" => "http://site.loc/4" ] ]的内容，但是您没有该目录，您有assets/，而且甚至不是您的内容想要，因为public/assets/位于index.html。所以你真正想要的是将public/设置为contentBase：

public/

现在您仍然遇到devServer: { contentBase: __dirname + "/public/", inline: true, host: '0.0.0.0', port: 8080, },无法提供正确捆绑的问题。它可能有用，但这是因为你在实际的文件系统上有一个bundle，它将被用来代替webpack-dev-server从内存中提供的bundle。原因是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' },会影响一些更改资产网址的加载程序。

Answer 2

这可能是'react-scripts'的问题，对我来说，它不适用于3.4.1版本，我将版本设置为3.4.0，现在可以使用了。打开package.json文件，并更改“ react-scripts”：“ 3.4.0”（如果还有），或者您可以根据需要尝试使用不同的版本。但是，此问题似乎与“反应脚本”版本有关，因此您需要进行检查。

Answer 3

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

Answer 4

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

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

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

来自webpack的内容不是来自/ foo

4 个答案: