webpack 开发服务器似乎没有提供文件答案

【问题标题】：webpack dev server does not seem to serve up fileswebpack 开发服务器似乎没有提供文件
【发布时间】：2018-04-29 01:16:28
【问题描述】：

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

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

> 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"

【问题讨论】：

标签： node.js npm webpack webpack-dev-server

【解决方案1】：

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

这说明问题是由项目路径中的空格引起的。我删除了空格，它工作得很好。

在这里发帖以防其他人有同样的问题。

【讨论】：