webpack 开发服务器似乎不提供文件

Question

我正在尝试设置一个新项目，但在使用 webpack-dev-server 时遇到了一些问题，看起来客户端编译成功，但我无法查看 index.html 或 main.js，它们似乎不可用。我尝试了很多不同的 webpack 配置设置，但 none 似乎有效。

我有一个包含客户端和服务器目录的项目，我的文件夹结构如下：

> project
    > dist
    > src
        > client
            client.tsx
            webpack.config.js
        > server
    package.json

在 package.json 我有一个开发客户端脚本："dev-client": "cd ./src/client && webpack-dev-server -w",

我的 webpack.config.js 看起来像这样（我已经对其进行了相当多的更改以使其正常工作）：

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

const projectRoot = path.join(__dirname, "..", "..");

module.exports = {
    devtool: "inline-source-map",
    mode: "development",
    entry: "./client",
    output: {
        path: path.join(projectRoot, "dist", "public"),
        publicPath: "/public/",
    },
    resolve: {
        extensions: [".js", ".ts", ".tsx"],
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: {
                    loader: "ts-loader",
                },
            },
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: "style-loader",
                    },
                    {
                        loader: "css-loader",
                    },
                    {
                        loader: "sass-loader",
                    },
                ],
            },
            {
                test: /\.(jpe?g|gif|png|svg|woff|woff2|ttf|eot)$/,
                use: {
                    loader: "url-loader",
                    options: {
                        limit: 10000,
                    },
                },
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin(),
    ],
    devServer: {
        contentBase: path.join(projectRoot, "dist"),
    },
}

当我运行 npm run dev-client 我收到成功消息 i ｢wdm｣: Compiled successfully. 但是当我导航到 http://localhost:8080/ 我看到的只是被编译到 dist 文件夹的服务器.

依赖信息：

"css-loader":          "^0.28.11",
"file-loader":         "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"node-sass":           "^4.9.0",
"sass-loader":         "^7.0.1",
"style-loader":        "^0.21.0",
"ts-loader":           "^4.2.0",
"url-loader":          "^1.0.1",
"webpack":             "^4.6.0",
"webpack-cli":         "^2.0.15",
"webpack-dev-server":  "^3.1.3"

Answer 1

所以经过一系列测试后，我发现回滚到 webpack-dev-server 的 3.1.1 可以解决这个问题，这让我想到了这个问题： https://github.com/webpack/webpack-dev-server/issues/1373

这表示问题是由项目路径中的空格引起的。我删除了空格，效果很好。

张贴在这里以防其他人遇到同样的问题。

webpack 开发服务器似乎不提供文件

webpack dev server does not seem to serve up files

node.js

npm

webpack

webpack-dev-server