Webpack dev server cannot get

Question

I' am using Webpack-4. Current behavior is that when webpack-dev-server is running, files under /build not get updated at all and it is showing the file directory.

If I delete the files under /build, webpack-dev-server is giving cannot get/. I assume, It should load them from memory.

const HtmlWebPackPlugin = require("html-webpack-plugin");
const htmlPlugin = new HtmlWebPackPlugin({
   template: "./src/index.html",
   filename: "./index.html"
});

const path = require('path');

module.exports = {
output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'build/'),
},

module: {
    rules: [{
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader",
                options: {
                    presets: ["env","react"]
                }
            }
        },
        { 
            test: /\.html$/,
            use: [{
                loader: "html-loader",
                options: {
                    minimize: true
                }
            }]
        }
    ]
},
plugins: [
    htmlPlugin
],
devServer: {       
    contentBase: "./build/",
    port: 5555
}
}

Please define entry point(entry: './main.js',) inside module.exports(above output config) — tarzen chugh
– tarzen chugh, Commented Apr 16, 2018 at 13:01

Steph · Accepted Answer · 2018-08-05 17:00:31Z

26

A few tips that helped me understand and debug my local webpack-dev-server config:

To see where the files are served (in-memory) by webpack-dev-server, type http://localhost:{yourport}/webpack-dev-server in your browser. Then you can click on one of the file (link) and it will show you the route it's served from and the content of the file.
When you launch webpack-dev-server (i.e. using npm start), it shows you in the console where it's serving content from based on your webpack.config.js file. (See below for a detailed explanation)
If you want Hot Reload (I don't see why not), your need to specify it on the command line (In your package.json start script) and not in the config file. For some reason, putting it into the config file was not working. So use something like:

package.json

"scripts": {
    "start": "webpack-dev-server --config webpack.config.js --hot --inline"
},

webpack.config.js Config

...
output: {
    filename: '[name].bundle.js',
    path: path.join(__dirname, 'public', 'scripts'),
},
...
devServer: {
    contentBase: path.join(__dirname, "public"),
    publicPath: 'http://localhost:8080/scripts/',
    port: 8080
},
...

Output

 i ｢wds｣: Project is running at http://localhost:8080/    
 i ｢wds｣: webpack output is served from http://localhost:8080/scripts/
 i ｢wds｣: Content not from webpack is served from C:\Workspace\WebSite\public

On line 2 of the output, notice that because of contentBase in the config, http://localhost:8080/scripts/ actually points to C:\Workspace\WebSite\public\scripts on the disk. (And this is where webpack would also put its files :) !!!)

On the publicPath config, the trailing backslash is important.

answered Aug 5, 2018 at 17:00

Steph

12.5k10 gold badges46 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mohammed AlBanna Over a year ago

I really wanted to give a big thank you for your answer! Hours of searches and the problem was from the publicPath was set by using path.resolve('./dist') which is the absolute path inside the app. That's why the browser couldn't see the compiled styles/scripts. This answer should be marked as the full answer!!

Collectives™ on Stack Overflow

Webpack dev server cannot get

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related