19

I've set up WebPack successfully - it's compiling my babel and SCSS files just fine, and I got the watch functionality to work fine. But I'd also like to work with the Hot Module Replacement - and I'm having difficulties getting it going. When I load the dev server in my browser it shows Cannot resolve module 'webpack/hot/dev-server'. My config looks like this:

import webpack from 'webpack';
import wpServer from 'webpack-dev-server';

var compiler = webpack({
    entry: [
        './src/core.js',
        'webpack/hot/dev-server'
    ],
    output: {
        path: outPath,
        filename: '[name].js'
    },
    resolveLoader: { root: path.join(MODULE_PATH, "node_modules") },
    module: {
        loaders: [
          { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
          { test: /\.scss$/, loader: "style!css!sass" }
        ]
    },
    plugins: [new webpack.HotModuleReplacementPlugin()],
    watch: true
});

var server = new wpServer(compiler, {
    contentBase: outPath,
    hot: true,
    quiet: false,
    noInfo: false,
    lazy: true,
    filename: "main.js",
    watchDelay: 300,
    headers: { "X-Custom-Header": "yes" },
    stats: { colors: true },
});
server.listen(8080, "localhost", function() {});

and my index.html contains:

<script src="http://localhost:8080/webpack-dev-server.js"></script>
<script src='main.js'></script>

Does anyone have any ideas?

Alastair
  • 5,894
  • 7
  • 34
  • 61
  • 1
    You cannot combine webpack-dev-server lazy mode with HMR. The lazy mode only recompiles when on HTTP request. HMR relies on watchers that recompile on change. Use `lazy: false` instead or just omit it. – Tobias K. Apr 04 '15 at 00:49
  • I've posted a small explanation about how HMR works and what's required to make it work: http://stackoverflow.com/questions/37016683/what-aspect-of-hot-module-replacement-is-this-article-for/37022884#37022884 – Johannes Ewald May 04 '16 at 08:57

3 Answers3

14

If you installed webpack-dev-server globally, which is npm install webpack-dev-server -g, try install it locally (just remove the option -g).

I solved this problem by doing so.

Robert
  • 5,278
  • 43
  • 65
  • 115
syfee
  • 149
  • 1
  • 6
  • It seems that the `--hot` option is looking for some files locally. Maybe there's a way to say they're installed globally. Cause installing dev-server locally and globally feels awkward. – yves amsellem Jan 23 '16 at 10:18
  • 2
    @yvesamsellem I'd assume this issue has to do with how `webpack-dev-server` determines the base dir of your project. I checked the docs and it looks like the utility exposes a `--content-base` option to override the default. Either way, installing it as a local `devDependency` should be the preferred approach to maintain consistency across platforms. – Evan Plaice Mar 25 '16 at 08:28
6

IMPORTANT

If you are using webpack@2.x.x.beta make sure you install 

webpack-dev-server@2.0.0-beta

Just running npm install webpack-dev-server won't play nice with webpack 2.

This will probably only be true while version 2 is still in beta.

I also struggled getting this working since the documentation on this topic is very fragmented.

Found this simple working example:

https://github.com/ahfarmer/webpack-hmr-starter-dev-server-api

Code is pretty self explanatory.

Dieter Gribnitz
  • 5,062
  • 2
  • 41
  • 38
4

I ran into a similar issue. I fixed it by installing webpack itself locally. To install webpack as a local dev dependency: npm i -D webpack

thiagodebastos
  • 126
  • 9