Почему webpack-dev-server ен обновляет страницу?

Question

[syncher]

Разбираюсь с Вебпаком. Сделал простой конфиг с webpack-dev-server. По идее, он должен автоматически делать новый бандл и обновлять страницу после изменения кода в редакторе. Но не работает! Вернее, работает только сам сервер, но не работает обновление страницы и упаковка нового бандла.

Структура папок:
build
- bundle.js
src
- main.js
index.html
webpack.config.js

Конфиг Вебпака:

var webpack = require('webpack');

module.exports = {
  entry: './src/main.js',
  output: {
    path: 'build',
    filename: 'bundle.js'
  },
  devServer: {
    inline: true,
    contentBase: ['./', './build'],
    port: 3000
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        loader: 'babel'
      },
      {
        test: /\.(png|jpg)$/,
        loader: 'url-loader?limit=20000'
      },
      {
        test: /\.scss$/,
        loader: 'style-loader!css-loader!sass-loader'
      }
    ]
  }
}

Конфиг main.js:

var React = require('react');
var ReactDOM = require('react-dom');
require('./style.scss');

class Message extends React.Component {
  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        <button>{this.props.message}</button><br></br>
        <p>GGGGGGGGGGGG</p>
        <img src="src/1.jpg"></img>
      </div>
    )
  }
}

ReactDOM.render(<Message title="Fuck Vasya" message="Can you email him?"/>,
  document.getElementById('react-container'));

Answer 1

[Aves]

webpack.github.io/docs/webpack-dev-server.html#inl...
Надо entry сделать массивом и добавить первым "webpack-dev-server/client?http://localhost:8080/"

Comments

[syncher]

Добавил
entry: ['webpack-dev-server/client?localhost:3000', './src/main.js'],

Теперь начал обновлять страницу после сохранения изменений в редакторе, но содержимое на странице не меняется :(

[Aves]

syncher: может, браузер кэширует, можно попробовать выключить кэш

Answer 2

[Bowen]

Hot Module Replacement.
P.S. Для реакта вроде были то ли модули то ли лоадеры. Прогуглите.

Comments

[syncher]

Я не понимаю вашего комментария. В видео, откуда код работало без Hot Module Replacement, чтобы это не было.

Answer 3

[intermundos]

Позвольте увидеть скрипт запускающий данный конфиг.
При запуске нужно указать --hot, либо добавить hot module replacement plugin непосредственно в конфиг.

Comments

[syncher]

Какой скрипт? Запускаю обычным webpack-dev-server

Answer 4

[Максим]

в секции с лоадерами:

{
        test: /\.js$/,
        loaders: ['react-hot', 'babel'],
        //include/exclude и тд
      },

в секции с плагинами:

plugins: [
    new WebpackNotifierPlugin, // и другие...
    new webpack.HotModuleReplacementPlugin()
  ],