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

问题描述

鉴于此配置:

var webpack = require('webpack');const path = require('path')模块.出口 = {条目:./src/index.js"，输出: {路径:path.join(__dirname, 'dist'),publicPath: path.join(__dirname, 'dist'),文件名:bundle.js"},开发服务器:{contentBase: "./dist",//热:真，}}

为什么 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` 在控制台.

解决方案

以下是 webpack & 的简单明了的规则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 时，会生成 NO PHYSICAL OUTPUT 文件，而是将生成的输出保存在内存中以避免 File-Write 操作.turn 有助于加快开发/调试周期.

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

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

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

它对 React-Router 也有帮助

现在参考生成的捆绑输出文件 &保存在内存中，您需要在浏览器的 URL 中附加 output.publicPath 即 Virtual Path.

webpack-dev-server 的最终 URL 将是:http://localhost:8080//

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

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

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

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

Given this config:

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,
  }
}

Why won't webpack-dev-server server my app properly? I have 0% understanding of localhost, vs localhost/webpack-dev-server, vs publicPath, vs contentBase, etc.. I know all of these paths, and configuration keys are important to setting up my project properly but despite hours of reading about them, they remain as confusing as when I started.

If I go to localhost:8080/webpack-dev-server I see Get http://localhost:8080/bundle.js net:ERR_ABORTED` in the console.

解决方案

Below are simple and straight forward rules for webpack & webpack-dev-server :

1. output.path : It needs to be an absolute path or /. You can get it easily using path.join
2. output.filename : This needs to be the name of output file without any extra file path.
3. devServer.contentBase : It is the physical location on the disk which is served as the root directory of webpack-dev-server when you open http://localhost:8080

By convention, we keep both output.path and devServer.contentBase same.The tricky part is when you run webpack cmd, it generates the physical bundle.js file.

But when you run webpack-dev-server, NO PHYSICAL OUTPUT file is generated, rather it keeps the generated output in memory to avoid File-Write operate which in turn helps in faster development/debugging cycle.

So any change you make in src.js or main.js file, it will generate the output but won't write that to disk and wepack-dev-server reads that directly from the memory.

1. output.publicPath : This is used by webpack, webpack-dev-server & other plug-in to generate the output or serve the generated bundle.The default value is /.

Now to refer the bundle output file that is generated & kept in the memory , you need to append the output.publicPath i.e. Virtual Path in the browser's URL.

The final URL for webpack-dev-server will be :http://localhost:8080/<output.publicPath>/<output.filename>

In your case, either you change thepublicPath: path.join(__dirname, 'dist')topublicPath: '/dist' if it contains any spaces.You can check it by printing the value of path.join(__dirname, 'dist') which returns the absolve path [different on MacOS & Window system].

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

If you want to dig further deeper, then here is the URL

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

这篇关于Webpack 开发服务器无法获取`http://localhost/8080/bundle.js`的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！