CODEWITHSUNDEEP
node.jsnpmwebpackwebpack-dev-server
Rick
Rick

Reputation: 1073

webpack dev server does not seem to serve up files

I am trying to setup a new project and am having a bit of trouble with webpack-dev-server, it looks like the client compiles successfully but I cannot view the index.html or the main.js, they just dont seem to be available. I have tried a bunch of different webpack config setups but none of them seem to work.

I have a project which has a client and a server directory, my folder structure looks like:

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

In package.json I have a dev client script: "dev-client": "cd ./src/client && webpack-dev-server -w",

my webpack.config.js looks something like this (i have changed it around quite a bit trying to get this to work):

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"),
    },
}

When I run npm run dev-client I get the success message i ｢wdm｣: Compiled successfully. but when I navigate to http://localhost:8080/ all I see is the server which gets compiled to the dist folder.

Dependencies info:

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

Upvotes: 0

Views: 855

Answers (1)

Rick
Rick

Reputation: 1073

So after a bunch of testing I figured out that rolling back to 3.1.1 of webpack-dev-server fixed the issue, this lead me onto this issue: https://github.com/webpack/webpack-dev-server/issues/1373

Which says that the issue is caused by spaces in the project path. I removed the spaces and it worked perfectly.

Posting here in case someone else has the same issue.

Upvotes: 1

Related Questions