Question

我正在尝试设置一个新项目，并且在使用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"

Answer 1

因此经过一系列的测试后我发现回滚到webpack-dev-server的3.1.1修复了这个问题，这引出了我的问题： https://github.com/webpack/webpack-dev-server/issues/1373

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

发布此处以防其他人遇到同样的问题。

webpack dev服务器似乎没有提供文件

1 个答案: