Webpack-开发服务器'无法获取/'

2022-07-20 00:00:00 javascript webpack-dev-server

我有如下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,在此配置下,myProjectRoot/dist/test/txt处的文件将由服务器发送到浏览器。对吗?output.publicPath与这一切有什么关系?

现在我有index.htmlbundle.js坐在myProjectRoot/dist/中。(尽管我认为bundle.js是一个有点令人困惑的因素,因为它实际上是由webpack-dev-server返回的内存中捆绑包,但尽管如此)。根据我前面的段落,我预计服务器将向浏览器返回index.html。因为contentBase/distindex.html在磁盘上的路径是./dist/index.html

但我看到的是:Cannot GET /

因此,如果我转到http://localhost:8080/bundle.js,我会看到完整的Java脚本包(与上次保存在文本编辑器中的内容是最新的)。但随后/index.html将以Cannot GET /胜出?

我错过了什么?


解决方案

也许您可以尝试将Static添加到devServer

此信息来自:https://webpack.js.org/configuration/dev-server/#devserverwatchfiles

我已将该文件放在同一文件夹中,因此我使用./作为我的路径。

我是这样做的:

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

相关文章