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 开发服务器从哪里提供文件。因此，如果我转到localhost:8080/test.txt，在此配置下，文件 atmyProjectRoot/dist/test/txt将由服务器发送到浏览器。那是对的吗？这一切有什么output.publicPath关系呢？

现在我已经index.html坐在bundle.js那里了myProjectRoot/dist/。（尽管我认为bundle.js这有点令人困惑，因为它实际上是由 webpack-dev-server 返回的内存包，但尽管如此）。根据我之前的段落，我希望服务器返回index.html到浏览器。由于contentBaseis/dist和index.html在磁盘上的路径是./dist/index.html.

但我却看到：Cannot GET /

所以，如果我再次访问，http://localhost:8080/bundle.js我会看到完整的 javascript 包（与我的文本编辑器中最后保存的内容是最新的）。但后来/index.html赢了Cannot GET /？

我缺少什么？

Answer 1

也许您可以尝试将静态添加到devServer?

我从以下位置获得此信息：https ://webpack.js.org/configuration/dev-server/#devserverwatchfiles

我已将文件放在同一文件夹中，因此我将其用作./我的路径。

我就是这样做的：

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

Answer 2

您需要在 中设置相对或绝对路径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'
  } 
}