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＆amp; amp;的简单直接规则。 webpack-dev-server：

output.path ：它必须是absolute path或/。您可以使用path.join
output.filename ：这需要是输出文件的名称，没有任何额外的文件路径。
devServer.contentBase ：当您打开http://localhost:8080

按照惯例，我们同时保持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＆amp;其他插件生成输出或提供生成的包。默认值为/。

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

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

现在引用生成的捆绑输出文件＆amp;保存在内存中，您需要在浏览器的网址中附加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＆amp;窗口系统]。

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

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

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

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

1 个答案: