WebPack Dev Server无法获取http:// localhost/8080/bundle.js`

Question

给定此配置：

var webpack = require('webpack');
const path = require('path')
module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.join(__dirname, 'dist'),
    publicPath: path.join(__dirname, 'dist'),
    filename: "bundle.js"
  },
  devServer: {
    contentBase: "./dist",
    // hot: true,
  } 
}

为什么WebPack-dev-server服务器我的应用程序不正确？我对Localhost，Localhost/WebPack-Dev-Server，vs publicPath，vs contentbase等有0％的了解。我知道所有这些路径，配置键对于正确设置我的项目很重要，但是尽管有几个小时的阅读，他们，它们仍然像我开始时一样令人困惑。

如果我转到localhost:8080/webpack-dev-server，我会在控制台中看到Get http://localhost:8080/bundle.js NET：ERR_ABORTED。

Answer 1

以下是WebPack＆amp;webpack-dev-server：

1. output.path ：它需要是绝对路径或/。您可以使用path.join
轻松获得它
2. output.filename ：这需要是输出文件的名称，而没有任何额外的文件路径。
3. devserver.contentbase ：当您打开http://localhost:8080
时，是磁盘上的物理位置，用作WebPack-dev-server的根目录

按照会议，我们同时保持output.path和devServer.contentBase相同。棘手的部分是运行webpack CMD时，它会生成物理bundle.js文件。

但是，当您运行webpack-dev-server时，没有物理输出文件会生成文件，而是将生成的输出保持在存储器中以避免文件写入，从而有助于更快地开发/调试周期。

因此，您在src.js or main.js文件中所做的任何更改都会生成输出，但不会将其写入磁盘和Wepack-dev-Server直接从内存中读取。

4. output.publicpath ：WebPack，WebPack-dev-server＆amp;其他插件生成输出或服务生成的捆绑包。默认值为/。

它是虚拟路径，不必在物理上存在 磁盘。示例：最终应用名称如果多个应用程序 托管在同一服务器上，例如/app1，/app2或某些外部CDN路径 /CDN-Path。

这也对React-Router <BrowserRouter basename='/app1'>

有帮助

现在引用生成的捆绑输出文件＆amp;保留在记忆中，您需要附加output.publicPath，即浏览器URL中的Virtual Path。

WebPack-Dev-Server的最终URL将是： http://localhost:8080/<output.publicPath>/<output.filename>

在您的情况下，您要么更改 publicPath: path.join(__dirname, 'dist')到 publicPath: '/dist'如果包含任何空间。您可以通过打印返回绝对路径的path.join(__dirname, 'dist')的值来检查它[MacOS＆amp;窗口系统]。

http://localhost:8080/dist/bundle.js

如果您想进一步挖掘，则是URL

https://medium.com/p/webpack-underding-the-publicpath-mystery-aeb96d9effb1