webpack/webpack-dev-server

Serves a webpack app. Updates the browser on changes. Documentation https://webpack.js.org/configuration/dev-server/.

webpack-dev-server's Issues

TypeError: Object #<Stream> has no method 'plugin' (gulp)

I'm facing this issue when running a webpack dev server from gulp:

TypeError: Object #<Stream> has no method 'plugin'
at new Server (/Users/***/***/node_modules/webpack-dev-server/lib/Server.js:22:11)

The line that throws the exception:

new WebpackDevServer(webpack(webpackConfig))

If I run webpack-dev-server from the CLI, everything works fine.
I'm on Mac OS X 10.9.3.

Any advice on this?

Firefox forms are double submitting when using webpack-dev-server.js

I've gone through all sorts of grief with my Firefox (not Chrome or IE) forms double submitting and I think that I've tracked it down to webpack-dev-server.js as the cause. I'm trying to do a normal HTML submit and nothing fancy. At first I thought that it was bootstrap doing something strange, but that is not the case. I'm currently not editing any webpack related files and I just have the dev server running in a console window.

What is the dev server doing that could interferre witih forms?

Write bundle to disk

I'm developing an app that has several entry points — one of which needs a custom html file that I'm generating using a View in my hapi.js server.

Is there a way I can configure the dev-server to write the generated js files to disk? Right now I either have to have another webpack watcher to compile files or stop and manually compile the files when I make a change to that particular part of the code.

Error: ENOENT, open '/live.bundle.js'

I'm getting the following error when trying to run the dev server:

Error: ENOENT, open '/Users/ronag/tmp2/react-hot-boilerplate/node_modules/webpack-dev-server/client/live.bundle.js'

package.json

{
  "name": "react-hot-boilerplate",
  "version": "0.1.1",
  "description": "Boilerplate for ReactJS project with hot code reloading",
  "scripts": {
    "start": "node server.js"
  },
  "config": {
    "port": 3000,
    "subdomain": null
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gaearon/react-hot-boilerplate.git"
  },
  "keywords": [
    "react",
    "reactjs",
    "boilerplate",
    "hot",
    "hot",
    "reload",
    "hmr",
    "live",
    "edit",
    "webpack"
  ],
  "author": "Dan Abramov <[email protected]> (http://github.com/gaearon)",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/gaearon/react-hot-boilerplate/issues"
  },
  "homepage": "https://github.com/gaearon/react-hot-boilerplate",
  "devDependencies": {
    "jsx-loader": "^0.11.0",
    "react-hot-loader": "^0.4.3",
    "webpack": "^1.4.0-beta3",
    "webpack-dev-server": "^1.4.10"
  },
  "dependencies": {
    "react": "^0.11.1"
  }
}

server.js

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');

var port = process.env.npm_package_config_port || 3000;

new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  hot: true
}).listen(port, 'localhost', function (err, result) {
  if (err) {
    console.log(err);
  }

  console.log('Listening at localhost:' + port);
});

Here is the log from npm install

> [email protected] install /Users/ronag/tmp2/react-hot-boilerplate/node_modules/webpack-dev-server/node_modules/socket.io/node_modules/socket.io-client/node_modules/ws
> (node-gyp rebuild 2> builderror.log) || (exit 0)

  CXX(target) Release/obj.target/bufferutil/src/bufferutil.o
  SOLINK_MODULE(target) Release/bufferutil.node
  SOLINK_MODULE(target) Release/bufferutil.node: Finished
  CXX(target) Release/obj.target/validation/src/validation.o
  SOLINK_MODULE(target) Release/validation.node
  SOLINK_MODULE(target) Release/validation.node: Finished
[email protected] node_modules/react-hot-loader
└── [email protected]

[email protected] node_modules/react
└── [email protected] ([email protected], [email protected], [email protected], [email protected])

[email protected] node_modules/jsx-loader
├── [email protected] ([email protected])
└── [email protected] ([email protected], [email protected], [email protected])

[email protected] node_modules/webpack
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected]
├── [email protected] ([email protected], [email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])

[email protected] node_modules/webpack-dev-server
├── [email protected]
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected])

Optimize for same host use-case

I think a common use-case for an inlined webpack-dev-server is that the contentBase is on the same host but different port. Take a look at my setup for example. It's ugly to hard-code http://vagrant.vm. I think that the webpack-dev-server could also work when the contentBase is a port instead of a full url.

What do you think? I can also create a pull request if you're ok with it.

Additionally using the inlined webpack-dev-server still seems a little bit complicated. Can't the additionally entry points added automagically to the bundle?

Output port into console

This is just a small thing: Could output the current port into the console when starting the server? I can't remember all default ports 😉

Client status inside the page is distracting

Hi!
Having the "App Ready", "App updated. Reloading app..." inside the windows is very distracting and bad looking (page flashing in red with each change).

I believe this can be solved easily by showing the status in the console.log instead of inside the page.
Colors can even be used inside the console.log
http://stackoverflow.com/questions/7505623/colors-in-javascript-console

Thank you!

first change doesn't reload

For some reason the first change to a file that I make after starting the server does not get picked up.

It looks like the server sends the hash and the ok, but since they are the first ones received they are ignored: https://github.com/webpack/webpack-dev-server/blob/master/client/index.js#L26

I'm on 1.6.4

Generated index.html isn't served on directory index

I'd like to use html-webpack-plugin to generate my index.html and serve it through webpack-dev-server when developing.

When an index.html file doesn't exist as a "real" file (on disk), loading the app base URL, e.g. http://localhost:3000, serves a directory listing instead of the generated index.html. Explicitly requesting http://localhost:3000/index.html returns the generated index.html as expected.

Page is not rendered in Chrome

Using the example code from this repository,
when i call http://localhost:8080/webpack-dev-server/index.html
i get 2 different results:

In IE, it works fine.
In Chrome, i get only the text-output of the file

NS_ERROR_FAILURE in Firefox

In some situations there occurs a NS_ERROR_FAILURE in Firefox. I don't know when it occurs and the error message is not very informative:

NS_ERROR_FAILURE: Failure
(847 out of range 551)

However, navigating to localhost:8080/content.html is fine so maybe its caused by the iframe.

I don't expect you to fix this, since there is not much information about this. Just wanted to record it... maybe it's a Firefox bug.

Are there any restrictions/problems if the test code is run in an iframe?

Socket.io 0.9.7

Perhaps socket.io could be updated to 1.2.

Integration with browsersync

Im using gulp + browsersync

Is it possible to use hot loading with the stack?

dev-server not bundling

There's a good chance this is user error, but I cannot get webpack-dev-server to update my bundles correctly.

I've installed both webpack and webpack-dev-server globally using npm. I can bundle perfectly fine with the webpack command, but the webpack-dev-server is not working correctly. The terminal output indicates that the bundle was successful but nothing is written to the file system. The live reload and app status work as intended, but upon reload it serves the contents of the file system which are out of date.

Here's a simple example in which I'm having trouble:

index.html

<html>
    <body>
        <script src="/bin/init.js"></script>
    </body>
</html>

webpack.config.js

module.exports = {
    entry: "./src/init.js",
    output: {
        path: "bin/",
        filename: "init.js",
    },
    devtool: "sourcemap",
    debug: true
};

src/init.js

console.clear();
console.log('initialized.');

webpack-dev-server output. This does not write anything to the file system.

http://localhost:8080/webpack-dev-server/
webpack result is served from /
content is served from C:\Users\Owner\Workspace\webpack-test
Hash: 801e0272a219e10a6229
Version: webpack 1.2.0-beta6
Time: 108ms
      Asset  Size  Chunks             Chunk Names
    init.js  1611       0  [emitted]  main
init.js.map  1353       0  [emitted]  main
chunk    {0} init.js, init.js.map (main) 44 [rendered]
    [0] ./src/init.js 44 {0} [built]
webpack: bundle is now VALID.

webpack output. This does write the bundle correctly.

Hash: 801e0272a219e10a6229
Version: webpack 1.2.0-beta6
Time: 89ms
      Asset  Size  Chunks             Chunk Names
    init.js  1611       0  [emitted]  main
init.js.map  1353       0  [emitted]  main
   [0] ./src/init.js 44 {0} [built]

I'm running Windows 8.1, and I've tried using older versions (1.2.7 and 1.2.1) of webpack-dev-server. Any help would be appreciated!

Watch files not required with webpack

Hi! Would it be possible to add to webpack-dev-server and middleware an option to watch also files outside the required ones?
This is needed specially for the HTML files, and maybe some css ones.

Thank you!

Regression: URL handling is partially broken since the static middleware patch

Running webpack-dev-server --colors --content-page index.html on example-app and then visiting http://localhost:8080/webpack-dev-server/ (the URL it prints) gives this stack trace:

Error: Invalid path false
    at pathToArray (/usr/local/lib/node_modules/webpack-dev-server/node_modules/webpack-dev-middleware/node_modules/enhanced-resolve/lib/MemoryInputFileSystem.js:48:40)
    at MemoryInputFileSystem.readdirSync (/usr/local/lib/node_modules/webpack-dev-server/node_modules/webpack-dev-middleware/node_modules/enhanced-resolve/lib/MemoryInputFileSystem.js:109:13)
    at writeDirectory (/usr/local/lib/node_modules/webpack-dev-server/lib/Server.js:62:21)
    at Server.<anonymous> (/usr/local/lib/node_modules/webpack-dev-server/lib/Server.js:94:3)
    at next_layer (/usr/local/lib/node_modules/webpack-dev-server/node_modules/express/lib/router/route.js:103:13)
    at Route.dispatch (/usr/local/lib/node_modules/webpack-dev-server/node_modules/express/lib/router/route.js:107:5)
    at /usr/local/lib/node_modules/webpack-dev-server/node_modules/express/lib/router/index.js:213:24
    at Function.proto.process_params (/usr/local/lib/node_modules/webpack-dev-server/node_modules/express/lib/router/index.js:284:12)
    at next (/usr/local/lib/node_modules/webpack-dev-server/node_modules/express/lib/router/index.js:207:19)
    at next (/usr/local/lib/node_modules/webpack-dev-server/node_modules/express/lib/router/index.js:182:38)

I tracked this down to this.middleware.getFilenameFromUrl("/"); returning false in the patch.

Commenting out publicPath in the config changes the trace to this:

Error: File doesn't exists /
    at MemoryInputFileSystem.readdirSync (/usr/local/lib/node_modules/webpack-dev-server/node_modules/webpack-dev-middleware/node_modules/enhanced-resolve/lib/MemoryInputFileSystem.js:120:10)
    at writeDirectory (/usr/local/lib/node_modules/webpack-dev-server/lib/Server.js:62:21)
    at Server.<anonymous> (/usr/local/lib/node_modules/webpack-dev-server/lib/Server.js:94:3)
    at next_layer (/usr/local/lib/node_modules/webpack-dev-server/node_modules/express/lib/router/route.js:103:13)
    at Route.dispatch (/usr/local/lib/node_modules/webpack-dev-server/node_modules/express/lib/router/route.js:107:5)
    at /usr/local/lib/node_modules/webpack-dev-server/node_modules/express/lib/router/index.js:213:24
    at Function.proto.process_params (/usr/local/lib/node_modules/webpack-dev-server/node_modules/express/lib/router/index.js:284:12)
    at next (/usr/local/lib/node_modules/webpack-dev-server/node_modules/express/lib/router/index.js:207:19)
    at next (/usr/local/lib/node_modules/webpack-dev-server/node_modules/express/lib/router/index.js:182:38)
    at next (/usr/local/lib/node_modules/webpack-dev-server/node_modules/express/lib/router/index.js:182:38)

Visiting http://localhost:8080/webpack-dev-server/index.html with publicPath commented lets the page load with a 404 error for http://localhost:8080/assets/main.js

Finally, uncommenting publicPath and visiting http://localhost:8080/webpack-dev-server/index.html works.

Problem with peerDependencies

There is an issue with the dependencies, though it's currently not a real problem. I just wanted to point out, that it may occur in the future.

Currently webpack-dev-server and webpack-dev-middleware have webpack as peerDependency. This results in the following dependency graph:

myApp
|-------------webpack
|-------------webpack-dev-server
              |-------------webpack-dev-middleware
              |-------------webpack

webpack is installed two times. One time inside of myApp/node_modules/ because it's a peerDependency of webpack-dev-server and one time inside of myApp/node_modules/webpack-dev-server/node_modules/. So when webpack-dev-server calls require("webpack"), the webpack version stored in webpack-dev-server/node_modules/webpack is required instead of the intended myApp/node_modules/webpack.

I think this is a hint that something with the dependencies is wrong. Maybe webpack should be a real dependency of both, because modules with peerDependencies should not require the peerDependency itself (at least thats the definition of a peerDependency).

Error: Module "jquery" not found in context "."

I'm not able to correctly load modules. It searches under node_modules/webpack-dev-server/node_modules.
My config file here:
https://c9.io/phoscur/filmalbum

var Server = require("webpack-dev-server");
var options = {
    content: "index.jade",

    webpack: {
        output: "bundle.js",
        debug: true,
        filenames: true,
        watch: true,
        "maxChunks": 5,
        "preLoaders": [
            {
                "test": "\\.js$",
                "include": "lib",
                "exclude": ["jam", "web_modules", "node_modules"],
                "loader": "jshint"
            }
        ],
        "amd": {
            "jQuery": true,
            "Backbone": true
        },
        "jshint": {
            "failOnHint": true,
            "globalstrict" : true,
            "laxcomma" : true,
            "laxbreak" : true,
            "loopfunc": true,
            "sub" : true,
            "node" : true,
            "browser" : true,
            "curly" : true,
            "eqeqeq" : true,
            "forin" : false,
            "undef" : true,
            "immed" : true,
            "latedef" : true,
            "newcap" : true,
            "noarg" : true,
            "nonew" : true,
            "trailing" : true,
            "devel": true,
            "es5": true,
            "camelcase": true,
            "regexp": true,
            "unused": true,
        }
    }
};
new Server("client.js", options).listen(process.env.PORT);
console.log("webpack-dev-server running on port", process.env.PORT);

Medium level of logging

I'm not sure if this is already supported, but right now the logging levels of webpack-dev-server are either lots and lots or none at all.

What I mean is, on startup and whenever changes are detected, hundreds (thousands maybe?) of lines are output to the console (i'm using the API not the CLI). The problem with this is it pushes useful app code originated logging lines out of the console scroll buffer.

I tried using the noInfo option and what happens is that there is nothing logged from webpack-dev-server at all.

What I would like to see is just the

webpack: bundle is now INVALID.
webpack: bundle is now VALID.

lines and also any errors that occurred and nothing more, so I know that webpack has detected changes and finished processing them.

Use with gulpfile, passing options

I'm experiencing trouble using webpack-dev-server in conjunction with gulp.

Using your example, I cannot get it to work: when I connect to

http://localhost:8080/webpack-dev-server/index.html

I've got this error:

Cannot GET /webpack-dev-server/index.html

No matter which contentBase I pass in the options.

I'm using this source code:

https://github.com/webpack/webpack-with-common-libs/blob/master/gulpfile.js

Cannot resolve module 'child_process' to build XMLHttpRequest

ERROR in ./~/parse/~/xmlhttprequest/lib/XMLHttpRequest.js Module not found: Error: Cannot resolve module 'child_process' in /Users/aksonov/UPDT/sf/node_modules/parse/node_modules/xmlhttprequest/lib @ ./~/parse/~/xmlhttprequest/lib/XMLHttpRequest.js 15:12-36

Uncaught SyntaxError: Unexpected token <

when i open the dev-server url i get an error:
Uncaught SyntaxError: Unexpected token < in index.html.js:1

I have checked the encoding on every file.

I hope you can reproduce this by installing the npm package "adesso-webpack"
On Windows, the postinstall-script in this package will scaffold the folder and run npm update via powershell - you will get an error on linux, but this is no problem if you simply to to the nodes_modules/adesso-webpack folder

Reflect pushState updates

Ideally I would like webpack-dev-server to reflect the pushState updates of my app, example :

If I hit http://localhost:8080/webpack-dev-server/jobs/1234 I'll get redirect to the right page of my app.
However if I navigate from http://localhost:8080/webpack-dev-server/ to a job details page, then make a modification on my code, the page will reload but I'll be redirected to the home page.

FYI here is my config, I run a middleware server.js :

var server = require('pushstate-server');

server.start({
  port: process.env.PORT || 8090,
  directory: './local'
});

webpack.config.js :

var webpack = require("webpack");

module.exports = {
  entry: ['./src/js/app/app.coffee'],

  output: {
    path: __dirname + "/local/js/",
    filename: 'bundle.js',
    publicPath: 'http://localhost:8080/js/',
    sourceMapFilename: '[file].map'
  },

  resolve: {
    extensions: ['', '.js', '.jsx', '.jsx.coffee', '.coffee']
  },

  module: {
    loaders: [
      { test: /\.jsx.coffee$/, loader: 'jsx!coffee' },
      { test: /\.coffee$/, exclude: /\.jsx.coffee$/, loader: 'coffee-loader' },
      { test: /\.json$/, loader: "json" }
    ]
  },

  devServer: {
    stats: {colors: true},
    contentBase: 'http://localhost:8090'
  },

  devtool: "source-map"

};

--content-base parameter ignored

when i use the content-base parameter in my console "--content-base ./xxx" or in my config file "contentBase: "./xxx"

after i start the server it will show me that the content is served from my root directory.

Trying to resolve external loader from node module when not needed

I'm not entirely sure this is an issue or something I didn't entirely understand. There is a small chance it could be a problem with jsx-loader as well.

When I build using the simple "webpack" command the problem doesn't happen, but when I go through webpack-dev-server it does happen. (Both use the same webpack.config.js obviously)

I use the external jsx-loader in my project, mapped to .jsx files. One jsx file depends on a .js file that uses node's util.format. When launching through webpack-dev-server, I get the following error:

ERROR in (webpack)/~/node-libs-browser/~/util/util.js
Module not found: Error: Cannot resolve module jsx in [my_home_path]/local/lib/node_modules/webpack-dev-server/node_modules/webpack/node_modules/node-libs-browser/node_modules/util
 @ (webpack)/~/node-libs-browser/~/util/util.js 526:19-48

When removing the following line (and the one using format), the error goes away:

var format = require("util").format;

As mentioned earlier, the error doesn't happen and format works fine when I use the regular webpack command.

Here is what my config file looks like:

var path = require("path");
var webpack = require("webpack");

module.exports = {
    context: path.join(__dirname, "app"),
    entry: {
        pageA: "./pageA.jsx",
        pageB: "./pageB.jsx"
    },
    output: {
        path: path.join(__dirname, "dist"),
        filename: "[name].bundle.js",
        chunkFilename: "[id].chunk.js",
        publicPath: "dist/"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" },
            { test: /\.less$/,loader: "style!css!less" },

            // required for bootstrap icons
            { test: /\.woff$/,   loader: "url?prefix=font/&limit=5000&mimetype=application/font-woff" },
            { test: /\.ttf$/,    loader: "file?prefix=font/" },
            { test: /\.eot$/,    loader: "file?prefix=font/" },
            { test: /\.svg$/,    loader: "file?prefix=font/" },

            { test: /\.js$/,    loader: "jsx" },
            { test: /\.jsx$/,   loader: "jsx?insertPragma=React.DOM" },
        ]
    },
    resolve: {
        modulesDirectories: ["node_modules", "bower_components"],
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin("common.js")
    ]
};

(Yes, I started from the multiple-entry-points example)

My files are:

• app
  • common.js (the one requiring node's util module)
  • shared.js (the one requiring common.js)
  • pageA.jsx
  • pageB.jsx
• webpack.config.js
• package.json
• pageA.html
• pageB.html

(If you need me to make a small standalone project to repro, I can.)

By the way, thanks for the wonderful tool! 😄

Hot mode still supported?

Is the hot mode still supported? It seems like hot is always false in

webpack-dev-server/client/index.js

Line 8 in 3932f64

var hot = false;

I'm trying to set up the hot mode with an inlined webpack-dev-server using the style-loader. The client receives the hot event and the webpack config has the HotModuleReplacementPlugin applied, but the styles are not replaced.

No way to enable hot mode without using deprecated hot: true in config

If I run with --hot and/or with the HotModuleReplacementPlugin, options.hot in Server.js remains undefined.

I tried tracking this in webpack-dev-server.js:

When using --hot and HotModuleReplacementPlugin:

optimist.argv.hot == true && wpOpt.hot == undefined && options.hot == undefined

When using hot:true in config:

optimist.argv.hot == true && wpOpt.hot == true && options.hot == true

Cannot find module 'http-proxy'

When running the latest webpack-dev-server on npm, I got this:

$ webpack-dev-server

module.js:340
    throw err;
          ^
Error: Cannot find module 'http-proxy'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:280:25)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> (/usr/local/lib/node_modules/webpack-dev-server/lib/Server.js:7:17)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)

issues with 'lazy:true'

(webpack-dev-server 1.6.1)

Using the example in the docs - http://webpack.github.io/docs/webpack-dev-server.html#api - displayed Connecting to socket.io server... and didn't serve or build assets. I tried hitting the expected paths for all the assets (because it's meant to rebuild only on request for entry file), but no joy.

Removing lazy:true from the config fixed the problem.

Bad code gen in hot mode

I'm trying very hard to get hot mode working in various projects, and failing consistently in various random ways.

One major issue is bad code gen. I'm using webpack/example-app as a publicly available sample in this issue. example-app may be outdated, and use deprecated APIs, but that shouldn't cause bad Javascript generation.

I commented out the window.webpackJsonp usage in app.js and set optimize.maxChunks=1 to make things move ahead, and then saw this being generated for pages.js:

/* 1 */
/***/ function(module, exports, __webpack_require__) {

    module.exports = {
        getPage: function(name, callback) {
            switch(name) {
            case "home":
                !/* require */(/* limit */function() { var __WEBPACK_AMD_REQUIRE_ARRAY__ = []; (function() {
                    callback(__webpack_require__(8));
                }.apply(null, __WEBPACK_AMD_REQUIRE_ARRAY__));}());
                break;
            case "test1":
                !/* require */(/* limit */function() { var __WEBPACK_AMD_REQUIRE_ARRAY__ = [__webpack_require__(13)]; (function(item) {
                    callback(item);
                }.apply(null, __WEBPACK_AMD_REQUIRE_ARRAY__));}());
                break;
            case "test2":
                !/*require.ensure*/(function() {
                    callback(__webpack_require__(9));
                }0(__webpack_require__));
                break;
            case "test3":
                !/*require.ensure*/(function() {
                    callback(__webpack_require__(10));
                }0(__webpack_require__));
                break;
            default: callback(null);
            }
        }
    };

/***/ },

Note the 0(__webpack_require__) in there.

I'm running webpack-dev-server like this: webpack-dev-server --colors --content-page index.html --hot

P.S., this issue isn't a major concern for me, I'm reporting it to be thorough. I'm trying to produce a reduced test case for another issue where module.hot.accept()'s first string argument is getting replaced by an incorrect moduleId, and array arguments staying as strings but not working. I'll file that bug separately.

P.P.S., even after fixing pages.js, things still remain broken in hot mode, and we aren't even talking about the hot part. The initial loaded app doesn't fully function.

No reload with `--hot`

I couldn't see much info in the docs about this, so apologies if I'm missing a crucial step.

I've installed webpack and webpack-dev-server globally. I've got a new directory with an index.js:

console.log("Testing webpack...");

And a webpack.config.js:

module.exports = {
    context: __dirname,
    entry: './index.js'
}

And then I'm running it like so:
wepack-dev-server --hot

After some hunting I realized the URL http://localhost:8080/webpack-dev-server/bundle is what I need for the reloading to work. Changing my JS and saving it will show the update in the terminal, but the browser will not reload and nothing new is printed to the console. Any ideas?

A related question:
I'm also trying it regularly, without the --hot command. In this case, I can see the new changes to my JS logged in the console. But it looks like the page is never actually reloaded. This causes the console to never be cleared as I save the file. Is there a way to have it behave like a normal live-reload?

Headers (e.g. Access-Control-Allow-Origin) on requests to contentBase

Hi,

I've jumped onto webpack and the webpack-dev-server quite recently and have been really enjoying developing with it.

Lately I ran into a scenario in which we have multiple (3-4) sub-projects all running an own webpack-dev-server on different ports. The bundles are then included in on one of the projects (being served over a dev-server) having an aggregating index.html including the other projects' bundles. Whenever another sub-project now starts requesting resources over its contentBase it obviously runs into CORS issues as its not running under the same port.

I've seen the dev-server having a header configuration option. Still, as far as I understand, this header is only for a request to the bundle not the index.html nor any other static resources which are being served via serveMagicHtml() in the lib/Server.js. Is there any way of accomplishing this through configuration or is it a scenario which is just not intended?

Cheers.

Duplicate publicPath-option?

Why is it possible to set the publicPath as an option for the webpack-dev-server? Shouldn't it be derived from the webpack-config?

module build failed, unknown encoding

I'm seeing resolution errors all over the place on projects that were working yesterday. Reverting to earlier versions of webpack-dev-server don't seem to resolve the issue though. This is a bit of a shot in the dark, but do you have any idea what might be causing this?

(removed screenshot)

Doesn't build on sub-path (win64) ?

I try to run webpack-dev-server with the following config:

module.exports = {
  entry: ['./lib/boot/index.js'],
  output: {
    path: __dirname + '/build',
    filename: "build.js"
  },
  module: {
    loaders: [
      { test: /\.css$/, loader: 'style-loader!css-loader' },
      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'} // inline base64 URLs for <=8k images, direct URLs for the rest
    ]
  }
};

when I start the server it shows this:

Version: webpack 1.4.5
Time: 38ms
   Asset  Size  Chunks             Chunk Names
build.js  1634       0  [emitted]  main
chunk    {0} build.js (main) 49 [rendered]
    [0] multi main 28 {0} [built]
    [1] ./lib/boot/index.js 21 {0} [built]
webpack: bundle is now VALID.

But it doesn't generate any build.js file in build folder!

It works when I run "webpack" on console.

content-base with url-parameters

When i use a content base with a second url parameter

--content-base http://mypage/index.html?param1=test&param2=test2 --port 9550 --colors"

During argument-parsing for webpack-dev-server, the & will cut off the remaining url-string and the following arguments as well. So, in this case, a server with a content-base set to http://mypage/index.html?param1=test will start with at the standard port 8080 with no colors.

Error with multiple compiler configs

I am using a multiple compiler config setup.
After upgrading from 1.4.9 to 1.6.3 the grunt webpack-dev-server task fails with this stack trace:

TypeError: Cannot call method 'every' of undefined
  at Server._sendStats (/home/cristi/Projects/Vuzum/Blogvio/webpack-with-common-libs/node_modules/webpack-dev-server/lib/Server.js:173:18)
  at Server.<anonymous> (/home/cristi/Projects/Vuzum/Blogvio/webpack-with-common-libs/node_modules/webpack-dev-server/lib/Server.js:25:8)
  at Tapable.applyPlugins (/home/cristi/Projects/Vuzum/Blogvio/webpack-with-common-libs/node_modules/webpack/node_modules/tapable/lib/Tapable.js:26:37)
  at Tapable.<anonymous> (/home/cristi/Projects/Vuzum/Blogvio/webpack-with-common-libs/node_modules/webpack/lib/MultiCompiler.js:75:10)
  at Tapable.applyPlugins (/home/cristi/Projects/Vuzum/Blogvio/webpack-with-common-libs/node_modules/webpack/node_modules/tapable/lib/Tapable.js:26:37)
  at Watching._done (/home/cristi/Projects/Vuzum/Blogvio/webpack-with-common-libs/node_modules/webpack/lib/Compiler.js:78:17)
  at Watching.<anonymous> (/home/cristi/Projects/Vuzum/Blogvio/webpack-with-common-libs/node_modules/webpack/lib/Compiler.js:61:18)
...

I looked in the mentioned file and the stats object does not have an assets key.

Server.prototype._sendStats = function(socket, stats) {
    if(stats.assets.every(function(asset) {
        return !asset.emitted;
    })) return;

This is the contents of stats:

{ version: '1.4.0-beta3',              
  hash: '726f99910ad970dc03dc66219db82afec93fb622',
  errors: [],
  warnings: [],
  children: 
   [ { errors: [],
       warnings: [],
       version: '1.4.0-beta3',
       hash: '726f99910ad970dc03dc',
       time: 1325,
       assetsByChunkName: [Object],
       assets: [Object],
       chunks: [Object],
       modules: [Object],
       children: [Object],
       name: undefined },
     { errors: [],
       warnings: [],
       version: '1.4.0-beta3',
       hash: '66219db82afec93fb622',
       time: 1253,
       assetsByChunkName: [Object],
       assets: [Object],
       chunks: [Object],
       modules: [Object],
       children: [],
       name: undefined } ] }

do not use i-frame for page content

Many pages from my development-server will have a X-FRAME-OPTIONS: SAMEORIGIN response header, so it is impossible to use the development-server, since the page are displayed in an i-frame.

Would it be possible to not use an i-frame?
Could it be done like livereload, where a script is added to the dom?

Module not found: Error: Cannot resolve module 'child_process' in ..socket.io

I am new to webpack, I was following this tutorial => http://webpack.github.io/docs/tutorials/getting-started/

Everything worked great until I got to the last section titled "DEVELOPMENT SERVER". After following the instructions, I get the following output (along with more similar errors) when visiting.

http://localhost:8080/webpack-dev-server/

Errors while compiling. App updated with errors. No reload!

(webpack)-dev-server/~/socket.io/lib/static.js
Module not found: Error: Cannot resolve module 'child_process' in /Users/jeberly/work/mydomain.com/webpack/node_modules/webpack-dev-server/node_modules/socket.io/lib
resolve module child_process in /Users/jeberly/work/mydomain.com/webpack/node_modules/webpack-dev-server/node_modules/socket.io/lib

Unable to start webpack-dev-server

I'm having difficulty starting webpack-dev-server on Mac OS X Mavericks. I tried versions 1.2.5, 1.2.6, and 1.2.7 with the same results.

➜ webpack-dev-server        
Hash: 521f38e17b8ca116e31a
Version: webpack 1.1.7
Time: 5ms
Asset  Size  Chunks       Chunk Names
webpack: bundle is now VALID.
http://localhost:8080/webpack-dev-server/
webpack result is served from /
content is served from /Users/Richard/projects/

Opening up http://localhost:8080/webpack-dev-server/ in both Firefox and Chrome just displays: "Connecting to socket.io server..."

The network panel shows the socket.io connection as status 101 switching protocols and pending.

Do you know what I'm doing wrong? I set

"The package webpack does not satisfy its siblings' peerDependencies requirements!" error when installing webpack-dev-server

SOLINK_MODULE(target) Release/obj.target/validation.node: Finished
COPY Release/validation.node
make: Leaving directory `/home/ubuntu/React/node_modules/webpack-dev-server/node_modules/socket.io/node_modules/socket.io-client/node_modules/ws/build'
npm WARN package.json [email protected] No repository field.
npm WARN package.json [email protected] No repository field.
npm WARN package.json [email protected] No repository field.
npm ERR! peerinvalid The package webpack does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants [email protected]

npm ERR! System Linux 3.2.0-40-virtual
npm ERR! command "/usr/bin/node" "/usr/bin/npm" "install" "webpack-dev-server" "--save-dev"
npm ERR! cwd /home/ubuntu/React
npm ERR! node -v v0.10.12
npm ERR! npm -v 1.2.32
npm ERR! code EPEERINVALID
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR!     /home/ubuntu/React/npm-debug.log
npm ERR! not ok code 0

This happens when I run npm install webpack-dev-server --save-dev in my project. I am running Ubuntu and already installed webpack doing npm install webpack -g.

I am probably missing something.

Expose a way to pass additional middleware

I'm developing the app locally but I need /api/* calls to be proxied to a remote server (this was proposed in #19 but got closed although I can't see how 12a9a solved this problem).

When using Connect, middleware did this for me:

var apiHook = function () {
  return function (req, res, next) {
    if (req.url.indexOf('/api') === 0) {
      req.pipe(request(config.baseUrl + req.url)).pipe(res);
    } else {
      next();
    }
  };
};

Similarly, since my app uses pushstate for navigation, I need to serve the root page whenever a path without an extension is requested. I used another middleware for this:

var pushStateHook = function (rootUrl) {
  var path = require('path');
  return function (req, res, next) {
    var ext = path.extname(req.url);
    if ((ext === '' || ext === '.html') && req.url !== '/') {
      req.pipe(request(rootUrl)).pipe(res);
    } else {
      next();
    }
  };
};

I used them like this:

gulp.task('connect', connect.server({
    port: 9000,
    middleware: function (connect) {
      return [
        apiHook(),
        pushStateHook('http://localhost:9000')
      ];
    }
}));

It would be very handy if I could configure additional middleware.
Otherwise I can't see how I can integrate this into my workflow.

How to catch errors with webpack-dev-server.js

I'm wondering how to catch errors with webpack-dev-server.js. I simply want to be able to show an alert error message if the browser console is closed. I seem to remember sokra posting some code for that but I can't find it. Basically I want to be able to be able to run a bit of code from my server template if it is in devel mode.

Hot mode fails when resolve.modulesDirectories is present

Command line: webpack-dev-server --inline --hot --progress --colors

And my webpack.config.js has resolve.modulesDirectories: ['node_modules', './components']

Result:

WARNING in (webpack)-dev-server/~/socket.io/lib/stores/redis.js
Module not found: Error: Cannot resolve module 'msgpack' in /home/kaod/GitHub/manaleak/node_modules/webpack-dev-server/node_modules/socket.io/lib/stores
 @ (webpack)-dev-server/~/socket.io/lib/stores/redis.js 54:20-38

ERROR in (webpack)-dev-server/~/socket.io/lib/manager.js
Module not found: Error: Cannot resolve module 'fs' in /home/kaod/GitHub/manaleak/node_modules/webpack-dev-server/node_modules/socket.io/lib
 @ (webpack)-dev-server/~/socket.io/lib/manager.js 11:9-22

ERROR in (webpack)-dev-server/~/socket.io/lib/static.js
Module not found: Error: Cannot resolve module 'fs' in /home/kaod/GitHub/manaleak/node_modules/webpack-dev-server/node_modules/socket.io/lib
 @ (webpack)-dev-server/~/socket.io/lib/static.js 14:9-22

ERROR in (webpack)-dev-server/~/socket.io/lib/static.js
Module not found: Error: Cannot resolve module 'child_process' in /home/kaod/GitHub/manaleak/node_modules/webpack-dev-server/node_modules/socket.io/lib
 @ (webpack)-dev-server/~/socket.io/lib/static.js 13:9-33

ERROR in (webpack)-dev-server/~/socket.io/~/redis/index.js
Module not found: Error: Cannot resolve module 'net' in /home/kaod/GitHub/manaleak/node_modules/webpack-dev-server/node_modules/socket.io/node_modules/redis
 @ (webpack)-dev-server/~/socket.io/~/redis/index.js 3:10-24

ERROR in (webpack)-dev-server/~/socket.io/~/redis/lib/parser/hiredis.js
Module not found: Error: Cannot resolve module 'hiredis' in /home/kaod/GitHub/manaleak/node_modules/webpack-dev-server/node_modules/socket.io/node_modules/redis/lib/parser
 @ (webpack)-dev-server/~/socket.io/~/redis/lib/parser/hiredis.js 5:14-32

ERROR in (webpack)-dev-server/~/socket.io/~/policyfile/lib/server.js
Module not found: Error: Cannot resolve module 'net' in /home/kaod/GitHub/manaleak/node_modules/webpack-dev-server/node_modules/socket.io/node_modules/policyfile/lib
 @ (webpack)-dev-server/~/socket.io/~/policyfile/lib/server.js 6:10-24

Support HTTPS (SSL)

Would it be possible to support HTTPS?
When i set my content-base to a HTTPS site, i get the following error:

https://mycontentpage was loaded over HTTPS, but ran insecure content from 'http://localhost:8080/bundle.js': this content should also be loaded over HTTPS.

I can not switch my content-page to http and also running chrome with "--disable-web-security" will not help.

Firefox: The character encoding of the HTML document was not declared

I just love webpack ...

Small issue I am sure many people will walk into and that is super easy to fix once and for all,
in firefox, webpack-dev-server generates the following warning whenever the page reloads:

"The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must to be declared in the document or in the transfer protocol."

To fix this:

in the head of client/live.html add:

<meta charset="utf-8"/>

Multiple bundles with different publicPaths

We are currently attempting to modularize our application a bit more and pulling things into different modules with a folders (eventually repos) each with its own webpack.config file that is lazy loaded (via curljs) when user navigates to page that requires that module.

Each module has a webpack config file has a different publicPath which points to a subfolder for that module. This wont currently work under webpack-dev-server since the dev server publicPath and webpack module need to be the same (well not exactly the same as the dev server publicPath has an additional prefix).

Perhaps it would make sense to have a devServer section in each webpack.config and have the dev server pull the bundle specific options from there rather then a global publicPath option.

Add MIME-Type guessing

9 months ago I added a pull-request to webpack-dev-middleware in order to add the correct mime types. I'm kind of surprised that webpack-dev-server is having the same issues. Can't webpack-dev-server just use the dev-middleware to serve all content?

I'd open a pull-request for the dev-server too, but I'm curious why the dev-server isn't using the middleware.

Proxy mode no longer works in 1.6.1

Getting error running webpack-dev-server in proxy mode:

Error: Must provide a proper URL as target
at ProxyServer. (/Users/pairing/projects/alm/alm-webapp/node_modules/webpack-dev-server/node_modules/http-proxy/lib/http-proxy/index.js:71:35)
at Server. (/Users/pairing/projects/alm/alm-webapp/node_modules/webpack-dev-server/lib/Server.js:112:11)
at Layer.handle as handle_request
at next (/Users/pairing/projects/alm/alm-webapp/node_modules/webpack-dev-server/node_modules/express/lib/router/route.js:100:13)
at Route.dispatch (/Users/pairing/projects/alm/alm-webapp/node_modules/webpack-dev-server/node_modules/express/lib/router/route.js:81:3)
at Layer.

Don't trigger module reloading when there were errors generating the bundle.

When using hot module reloading (or plain refreshing) it would be good if the server doesn't trigger module reloading when there were errors during generation of the bundle as it generally results in a broken page. I usually save a lot while coding so it is normal that sometimes the syntax will be wrong.

Or maybe there is already an option for this?