Webpack-dev-server: dev-server claims it compiles but doesn't

Created on 11 Feb 2017  路  8Comments  路  Source: webpack/webpack-dev-server

I'm trying to get started with webpack-dev-server but have run into a problem.
I configured webpack to compile a file index.js to build/app.js and this works fine as long as I use manual "webpack" or "webpack --watch" but when i use webpack-dev-server --open" the page is shown correctly but never updated when I edit index.js.
When I edit index.js I see the following output on the console

webpack: Compiling...
Hash: 68a1e5de074822c30fe2
Version: webpack 2.2.1
Time: 44ms
 Asset    Size  Chunks                    Chunk Names
app.js  315 kB       0  [emitted]  [big]  app
chunk    {0} app.js (app) 301 kB [entry] [rendered]
   [35] ./index.js 130 bytes {0} [built]
     + 85 hidden modules
webpack: Compiled successfully.

The file app.js is never touched though.
This happens with webpack 2.2.1 and webpack-dev-server 2.3.0.

Most helpful comment

@serheyShmyg, I tried your repository. It's a configuration issue. Your /index.html file tries to use the JS and CSS files from the build/ folder, but webpack-dev-server doesn't put its file there so it uses the existing files from this folder.

I made a PR for you, fixing your issues. You're lucky I had some time to kill 馃槃 (https://github.com/serheyShmyg/frontend/pull/1).

@dennisjac see the above PR for an example. If you still have an issue, please ask on StackOverflow. If you link me to it perhaps I'll take a look.

All 8 comments

AFAIK webpack-dev-server is not supposed to build to the filesystem. It stores built files in memory and serves them from memory as well.

@WoodyWoodsta nevertheless it should and it is run webpack build, but server livereload doesn't work anymore and after manual refresh, no changes, as described @dennisjac.

The file app.js is never touched though.

What do you mean with this? The bundle is built in-memory, as the readme explicitly states.
If you understand that, then please post a repository reproducing the issue, I can't help you without more information...

@SpaceK33z try this https://github.com/serheyShmyg/frontend maybe it's not obvious, but when I start dev server first time, I get such log http://prntscr.com/e7b7z6 and as a result I want to get new bundle, but I don't (probably it's my fault, that I think so :) ). And every time I save any file, in console I see some incremental changes, but server livereload not working. Manual page reload also doesn't help.

@serheyShmyg, I tried your repository. It's a configuration issue. Your /index.html file tries to use the JS and CSS files from the build/ folder, but webpack-dev-server doesn't put its file there so it uses the existing files from this folder.

I made a PR for you, fixing your issues. You're lucky I had some time to kill 馃槃 (https://github.com/serheyShmyg/frontend/pull/1).

@dennisjac see the above PR for an example. If you still have an issue, please ask on StackOverflow. If you link me to it perhaps I'll take a look.

@SpaceK33z thanks, it works. Probably you should change readme a little bit, that users understand how to works with publicPath. Because now it's not obvious.

Now, when you change something in your assets, it should live-reload the files.

I've been trying to get HMR to work several hours without luck. Thank you @SpaceK33z, your solution worked for me as well 鈽猴笍

This feature
If you're having trouble, navigating to the /webpack-dev-server route will show where files are served. For example, http://localhost:9000/webpack-dev-server. (src)
saves me, I was able to understand how files are served, then I have changed it by publicPath.
馃帀

My problem was in my multiple webpack config environment, so files were served in named contexts.
Like:
http://localhost:9000/webpackConfig1/yourFiles
http://localhost:9000/webpackConfig2/yourFiles
...
etc

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Ky6uk picture Ky6uk  路  3Comments

antoinerousseau picture antoinerousseau  路  3Comments

Jack-Works picture Jack-Works  路  3Comments

subblue picture subblue  路  3Comments

da2018 picture da2018  路  3Comments