react+webpack开发中webpack-dev-server无法正常使用？

Question

在使用命令webpack-dev-server --hot之后，代码依然是根据build的结果来，没法实现实时更新，刷新之后也是，每次更改都要build一遍。请问有什么方法吗？

PS：有用到react-hot-loader，按照gituhb的步骤加上去之后没什么效果，我初学者也不太清楚它的作用……

问题更新：

我尝试加上了babel的transform-runtime插件，然后命令行出现了这种情况，页面渲染也失败了，如何解决？

//.babelrc
{
  "presets": ["es2015", "stage-2"],
  "plugins": ["transform-runtime"],
  "comments": false
}

//webpack.config.js
var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: [
    'webpack-dev-server/client?http://0.0.0.0:8080', // WebpackDevServer host and port
    'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors
    './src/main.js'
  ],
  output: {
    path: path.resolve(__dirname, './dist/'),
    publicpath: '/dist/',
    filename: 'build.js'   
  },
  resolveLoader: {
    root: path.join(__dirname, 'node_modules')
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: ['react-hot','babel'],
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|jpeg|gif|svg)$/,
        loader: 'url',
        query: {
          limit: 8192,
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  devtool: 'eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = 'source-map';
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    }),
    new webpack.optimize.OccurenceOrderPlugin()
  ])
}

Answer 1

我怀疑你是在本地直接访问index.html 和build 之后的js，这样webpack-dev-server是无法起作用的；启动webpack-dev-server后是要去localhost:8080那访问的，你的更改只会同步到这个地址上，webpack-dev-server不会自动帮你生成build文件的。

PS：一般来说，webpack 的配置文件分两份，一份是开发时给webpack-dev-server 用；一份是build 的时候给webpack 用。