Webpack 开发服务器无法获取`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、vs 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 和 webpack-dev-server 的简单明了的规则：

1. output.path：它需要是绝对路径或/. 你可以很容易地使用它path.join
2. output.filename：这需要是输出文件的名称，没有任何额外的文件路径。
3. devServer.contentBase : 磁盘上的物理位置，作为 webpack-dev-server 打开时的根目录http://localhost:8080

按照惯例，我们都保持output.path和devServer.contentBase相同。棘手的部分是当您运行webpackcmd 时，它会生成物理bundle.js文件。

但是当您运行时webpack-dev-server，不会生成物理输出文件，而是将生成的输出保留在内存中以避免文件写入操作，这反过来有助于加快开发/调试周期。

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

4. output.publicPath : webpack、webpack-dev-server 和其他插件使用它来生成输出或为生成的包提供服务。默认值为/。

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

它对 React-Router 也有帮助 <BrowserRouter basename='/app1'>

现在要引用生成并保存在内存中的捆绑输出文件，您需要在浏览器的 URL 中附加output.publicPathie 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 & Window 系统不同]。

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

如果你想更深入地挖掘，那么这里是 URL

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