Get Webpack-Dev-Server Running in Webpack2

Question

I cannot seem to get webpack-dev-server for webpack2 to work.

I am using the versions: webpack@2.1.0-beta.25 & webpack-dev-server@2.1.0-beta.10

Im getting the following CLI log:

 http://localhost:8080/
webpack result is served from /
content is served from /var/www/homelyfe/hl-app/app/index.js
Hash: 2830dae8362c968c034c
Version: webpack 2.1.0-beta.25
Time: 544ms
       Asset       Size  Chunks             Chunk Names
run.build.js    47.6 kB       0  [emitted]  app
  index.html  198 bytes          [emitted]  
chunk    {0} run.build.js (app) 43.4 kB [entry] [rendered]
    [0] ./app/index.js 69 bytes {0} [built]
    [1] (webpack)-dev-server/client?http://localhost:8080 4.14 kB {0} [built]
    [2] ./~/punycode/punycode.js 14.7 kB {0} [built]
    [3] ./~/querystring-es3/index.js 127 bytes {0} [built]
    [4] ./~/url/url.js 23.3 kB {0} [built]
    [5] (webpack)/buildin/global.js 506 bytes {0} [built]
    [6] (webpack)/buildin/module.js 548 bytes {0} [built]
    [7] multi app 40 bytes {0} [built]

ERROR in (webpack)-dev-server/client?http://localhost:8080
Module not found: Error: Can't resolve './socket' in '/var/www/homelyfe/hl-app/node_modules/webpack-dev-server/client'
 @ (webpack)-dev-server/client?http://localhost:8080 4:13-32
 @ multi app

ERROR in (webpack)-dev-server/client?http://localhost:8080
Module not found: Error: Can't resolve 'strip-ansi' in '/var/www/homelyfe/hl-app/node_modules/webpack-dev-server/client'
 @ (webpack)-dev-server/client?http://localhost:8080 3:16-37
 @ multi app

ERROR in (webpack)-dev-server/client?http://localhost:8080
Module not found: Error: Can't resolve 'webpack/hot/emitter' in '/var/www/homelyfe/hl-app/node_modules/webpack-dev-server/client'
 @ (webpack)-dev-server/client?http://localhost:8080 124:19-49
 @ multi app

ERROR in ./~/url/url.js
Module not found: Error: Can't resolve './util' in '/var/www/homelyfe/hl-app/node_modules/url'
 @ ./~/url/url.js 25:11-28
 @ (webpack)-dev-server/client?http://localhost:8080
 @ multi app

ERROR in ./~/querystring-es3/index.js
Module not found: Error: Can't resolve './decode' in '/var/www/homelyfe/hl-app/node_modules/querystring-es3'
 @ ./~/querystring-es3/index.js 3:33-52
 @ ./~/url/url.js
 @ (webpack)-dev-server/client?http://localhost:8080
 @ multi app

ERROR in ./~/querystring-es3/index.js
Module not found: Error: Can't resolve './encode' in '/var/www/homelyfe/hl-app/node_modules/querystring-es3'
 @ ./~/querystring-es3/index.js 4:37-56
 @ ./~/url/url.js
 @ (webpack)-dev-server/client?http://localhost:8080
 @ multi app
Child html-webpack-plugin for "index.html":
    chunk    {0} index.html 539 kB [entry] [rendered]
        [0] ./~/lodash/lodash.js 537 kB {0} [built]
        [1] (webpack)/buildin/global.js 506 bytes {0} [built]
        [2] (webpack)/buildin/module.js 548 bytes {0} [built]
        [3] ./~/html-webpack-plugin/lib/loader.js!./~/html-webpack-plugin/default_index.ejs 540 bytes {0} [built]
webpack: bundle is now VALID.

---

My webpack.config.js file looks like this:

const path = require( "path" );
const merge = require( "merge" );
const htmlWebpackPlugin = require( "html-webpack-plugin" );
const parts = require( "./webpack.config.parts" );
const PATHS = {
    app : path.join( __dirname, "app" ),
    build : path.join( __dirname, "build" )
};

const common = {
    entry : {
        app : PATHS.app + "/index.js"
    },
    output : {
        filename : "run.build.js",
        path : PATHS.build
    },
    resolve : {
        alias : {
            components : path.resolve( __dirname, "app/components" )
        },
        extensions : [ "js", "jsx" ]
    },
    devServer : {
        contentBase : PATHS.app
    },
    module : {
        rules : [
            {
                test : "/\.jsx?$/",
                use : [
                    {
                        loader : "babel-loader",
                        options : {
                            presets : [
                                "react",
                                "es2015"
                            ]
                        }
                    }
                ]
            }
        ]
    },
    plugins : [
        new htmlWebpackPlugin({
            title : "!!! testing webpack2 !!!"
        })
    ]
};

var config;    
switch( process.env.npm_lifecycle_event ){
    case( "buildProd" ):
        config = merge( common,
                             {} );
    case( "startDev" ):
    default:
        config = merge( common,
                             {
                                 devServer : {
                                     contentBase : PATHS.app
                                 }
                             });
}
module.exports = config;

What am I missing?

Answer 1

The solution was to pass the --no-inline option to the script in package.json . So, within the package.json , the scripts obj would be:

"scripts" : {
    "startDev" : "webpack-dev-server --no-inline"
}

https://webpack.js.org/configuration/dev-server/#devserver-inline-cli-only

Answer 2

The real problem is your extensions key inside resolve (webpack config) is set up wrong.

WRONG

extensions : [ "js", "jsx" ]

CORRECT

extensions : [ ".js", ".jsx" ]

Check https://github.com/webpack/webpack-dev-server/issues/720 or https://webpack.js.org/configuration/resolve/

I am using a different setup but got the same errors (nearly). I think the --no-inline is just a workaround.