react热替换问题

Question

我用 babel-plugin-react-transform 实现热替换，可是效果却没有体现出来，依然是直接刷新,请问我的究竟错在哪里

pakage.json

{
  "name": "react-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-plugin-react-transform": "^2.0.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-react-hmre": "^1.1.1",
    "eslint": "^4.4.1",
    "html-webpack-plugin": "^2.30.1",
    "react-transform-catch-errors": "^1.0.2",
    "react-transform-hmr": "^1.0.4",
    "redbox-react": "^1.5.0",
    "webpack": "^3.5.2",
    "webpack-dev-server": "^2.7.1"
  },
  "dependencies": {
    "babel-polyfill": "^6.23.0",
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  }
}

webpack配置

var webpack = require('webpack')
var HtmlwebpackPlugin = require('html-webpack-plugin')
var path = require('path')

module.exports = {
  devtool: 'eval-source-map',
  entry: {
    app: './src/index.js'
  },
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js',
    publicPath: '/'
  },
  resolve: {
    extensions: ['.js', '.jsx'],
    alias: {
      'src': path.resolve(__dirname, '/src')
    }
  },
  module: {
    loaders: [
    {
      test: /\.jsx?$/,
      loader: 'babel-loader',
      exclude: path.resolve(__dirname, '/node_modules')
    }
    ]
  },
  plugins: [
    new webpack.NoErrorsPlugin(),//用来跳过编译时出错的代码并记录，使编译后运行时的包不会发生错误
    new HtmlwebpackPlugin({
      template: path.resolve(__dirname, './index.html'),
      inject: true
    }),
    new webpack.HotModuleReplacementPlugin()
  ],
  devServer: {
    inline: true,//实时刷新
    historyApiFallback: true
  }
}

.babelic配置

{
  "presets": ["react", "es2015"],
  "env": {
   "development": {
     "presets": ["react-hmre"]
   }
  }
}

script

"scripts": {
    "dev": "webpack-dev-server"
  }

Answer 1

这种问题排查错误很麻烦的，建议github上找个简单的脚手架工程直接用，然后还有耐心的话就两边仔细对比下差异

Answer 2

--hot

应该是字数不够，那就加点吧

Answer 3

http://npm.taobao.org/package...
这个很难查错的

Answer 4

使用react-hot-loader加载器