Webpack 开发服务器无法获取 `http://localhost/8080/bundle.js`答案

【问题标题】：Webpack dev server cannot get `http://localhost/8080/bundle.js`Webpack 开发服务器无法获取 `http://localhost/8080/bundle.js`
【发布时间】：2017-12-06 00:44:55
【问题描述】：

鉴于此配置：

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`。

【问题讨论】：

我也是。你解决了吗？

标签： webpack-dev-server

【解决方案1】：

以下是 webpack 和 webpack-dev-server 的简单直接的规则：

output.path ：它需要是absolute path 或/。您可以使用path.join 轻松获得它
output.filename ：这需要是输出文件的名称，没有任何额外的文件路径。
devServer.contentBase : 打开http://localhost:8080时作为webpack-dev-server根目录的磁盘物理位置

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

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

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

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

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

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

现在要引用生成并保存在内存中的捆绑输出文件，您需要在浏览器的 URL 中附加 output.publicPath 即 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

【讨论】：

谢谢，添加下面代码的有用信息救了我publicPath: path.join(__dirname, 'dist'),