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

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

但是当您运行 webpack-dev-server 时，会生成 NO PHYSICAL OUTPUT 文件，而是将生成的输出保存在内存中以避免 File-Write 操作.turn 有助于加快开发/调试周期.

因此，您在 src.js 或 main.js 文件中所做的任何更改，都会生成输出但不会将其写入磁盘，并且 wepack-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/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 :

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.

It is VIRTUAL PATH and need not be present on the physical disk. Example : final application name if multiple apps are hosted on the same server like /app1, /app2, or some external CDN path /CDN-Path.

It is also helpful for React-Router <BrowserRouter basename='/app1'>

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 the publicPath: path.join(__dirname, 'dist') to publicPath: '/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/p/webpack-understanding-the-publicpath-mystery-aeb96d9effb1

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