首页 文章

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

提问于
浏览 次
2

鉴于此配置：

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

webpack-dev-server

1 回答

  • 2

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

    • output.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文件，而是将生成的输出保留在内存中以避免 File-Write 操作，从而有助于更快的 development/debugging 循环。

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

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

    它是VIRTUAL PATH，不需要存在于物理磁盘上。示例：如果多个应用程序托管在同一服务器上(如/app1，/app2或某些外部 CDN 路径/CDN-Path)，则为最终应用程序名称。

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

    现在要引用生成并保存在内存中的 bundle 输出文件，您需要追加output.publicPath i.e。 Virtual Path在浏览器的 URL 中。

    webpack-dev-server 的最终网址为：http://localhost:8080/<output.publicPath>/<output.filename>

    在您的情况下，如果publicPath: path.join(__dirname, 'dist')包含任何空格，则将其更改为publicPath: '/dist'。您可以通过打印返回绝对路径[_]的path.join(__dirname, 'dist')的值来检查它。

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

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

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

    回复于

相关问题