webpack-dev-server：“无法获取/”

Question

我有以下的webpack配置文件：

module.exports = {
  entry: "./src/index.js",
  output: {
    path: __dirname + '/dist',
    // publicPath: __dirname + '/dist/',
    filename: "bundle.js"
  },
  devServer: {
    contentBase: "/dist",
    hot: true,
  } 
}

我的理解是contentBase指示webpack dev server文件从哪里提供服务。因此，如果我访问localhost:8080/test.txt，在此配置下，服务器会将myProjectRoot/dist/test/txt中的文件发送到浏览器。这正确吗？那output.publicPath与此有什么关系呢？

现在，我的index.html和bundle.js都位于myProjectRoot/dist/中。(虽然我认为bundle.js有点令人困惑，因为它实际上是由webpack-dev-server返回的内存捆绑包，但还是)根据我之前的段落，我期望服务器将index.html返回给浏览器。由于contentBase是/dist且index.html在磁盘上的路径是./dist/index.html。

但是相反，我看到：Cannot GET / 所以，再次，如果我去访问http://localhost:8080/bundle.js，我可以看到完整的JavaScript捆绑包（与我在文本编辑器中最后保存的内容相同）。但是，/index.html却是Cannot GET /？我错过了什么吗？

- Alex Bollbach

---

Alex，你找到解决方案了吗？ - JCarlosR

Answer 1

也许你可以尝试在devServer中添加静态文件？

我从这里得到了这个信息：https://webpack.js.org/configuration/dev-server/#devserverwatchfiles

我把文件放在同一个文件夹中，所以我的路径使用了./。

这是我实现的方式：

devServer: {
   //....//
   static: {                               
     directory: path.join(__dirname, './'),  
     watch: true
   }
}

- user16856406

Answer 2

Alex，你写道：

我的理解是 contentBase 告诉 webpack dev server 从哪里提供文件

这并不完全正确。 contentBase 选项用于告诉服务器仅提供 静态 文件的路径。但问题在于，当使用 webpack-dev-server 时，它会在内存中生成动态输出（捆绑），因此您没有静态内容可供提供。

1）您应该删除 contentBase 选项，因为默认情况下 webpack-dev-server 使用 output.path 值作为提供文件的路径。

2）目前，您的 ./dist 文件夹中没有 index.html。如果您希望 dev server 生成并提供 index.html 文件，则应使用 html-webpack-plugin 生成带有所有捆绑文件链接的 index.html 文件。如果您需要比此插件生成的默认标记更多的标记，请查看其模板选项。

因此，您的 webpack 配置可能如下所示：

const HtmlWebpackPlugin = require("html-webpack-plugin")
const path = require("path")

module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js"
    },
    // module: { rules: [ ... ] }
    devServer: {
        index: index.html
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html"
        })
    ]
}

- G.Denis

---

这几乎为我解决了问题。不确定自从这篇文章发布以来webpack是否已经更新，但是我使用了这个：devServer: { static: { directory: path.join(__dirname, './') } } - Jason

导致错误的结果是 [webpack-cli] ReferenceError: index is not defined。 - Phalgun

Answer 3

你需要在devServer.contentBase中设置相对路径或绝对路径。 webpack-dev-server不使用你的项目作为根目录，因此它不会将/dist解析为项目目录中的文件夹。

请尝试以下方法:

module.exports = {
  entry: "./src/index.js",
  output: {
    path: __dirname + '/dist',
    filename: "bundle.js"
  },
  devServer: {
    contentBase: __dirname + '/dist'
    // contentBase: 'dist'
  } 
}

- p.m.jakubowski

---

对我来说它不起作用。即使我使用publicPath而不是contentBase。 - JCarlosR

Answer 4

我把index.html放在/public文件夹中，这似乎解决了问题。

- JobJob

Answer 5

我尝试了不同的解决方案大约两个小时，但无法解决问题。我的解决方案是使用您的文本编辑器的实时服务器插件。例如，我使用Atom，插件是atom-live-server。VS Code也有一个插件。

- Alvand

Answer 6

我使用了上面的静态解决方案3。它对以下版本起作用： webpack: 5.66.0 webpack-cli: 4.9.1 webpack-dev-server: 4.7.3

- SakerCobalt

---

请不要将“谢谢”作为答案。一旦您拥有足够的声望，您就可以投票支持有用的问题和答案。- 来自审核 - Luca Kiebel