Question

我有以下webpack配置：

module.exports = {
  entry: "./src/index.js",
  output: {
    path: __dirname + '/dist',
    // publicPath: __dirname + '/dist/',
    filename: "bundle.js"
  },
  devServer: {
    contentBase: "/dist",
    hot: true,
  } 
}

我的理解是contentBase告诉webpack dev服务器从哪里提供文件。因此，如果我转到localhost:8080/test.txt，则在此配置下，myProjectRoot/dist/test/txt处的文件将由服务器发送到浏览器。那是对的吗？ output.publicPath与所有这些有什么关系？

现在我index.html和bundle.js现在坐在myProjectRoot/dist/。（虽然我认为bundle.js有点令人困惑，因为它实际上是由webpack-dev-server返回的内存包，但仍然如此）。鉴于我之前的段落，我希望服务器将index.html返回给浏览器。由于contentBase为/dist且index.html在磁盘上的路径为./dist/index.html。

但相反，我看到：Cannot GET /

再次，如果我转到http://localhost:8080/bundle.js，我会看到完整的javascript包（最新保存在我的文本编辑器中的内容）。但是/index.html与Cannot GET /一起赢了？

我错过了什么？

Answer 1

您需要在devServer.contentBase中设置相对路径或绝对路径 webpack-dev-server不要将您的项目用作根目录，因此它不会将/dist解析为项目目录中的文件夹。

试试这个：

module.exports = {
  entry: "./src/index.js",
  output: {
    path: __dirname + '/dist',
    filename: "bundle.js"
  },
  devServer: {
    contentBase: __dirname + '/dist'
    // contentBase: 'dist'
  } 
}

Answer 2

亚历克斯。您写道：

我的理解是contentBase告诉webpack开发服务器从何处提供文件

这并不完全正确。 contentBase 选项用于告诉服务器仅在何处提供静态文件。但是问题是，当您使用webpack-dev-server时，它会在内存中生成动态输出（捆绑包），因此您没有静态内容可供服务。

1）您应该删除contentBase选项，因为默认情况下，webpack-dev-server使用 output.path 值作为服务文件的路径。

2）然后，。/ dist文件夹中现在没有index.html。如果您希望由开发服务器生成index.html文件并为其提供服务，则应使用 html-webpack-plugin 生成index.html文件，其中所有捆绑文件都作为链接包含在其中。如果您需要的不仅仅是此插件生成的默认标记，则应查看其模板选项

因此您的webpack cofig可能如下所示：

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");

module.exports = {
     entry: "./src/index.js",

     output: {
         path: path.resolve(__dirname, "dist"),
         filename: "bundle.js"
     },

/ *模块：{rules：[...]} * /

  devServer: {
     index: index.html
    },

  plugins: [new HtmlWebpackPlugin({templte: "./src/index.html"})
};

webpack-dev-server＆＃39;无法获取/＆＃39;

2 个答案: