的WebPack反應熱加載器不工作

下面是我webpack.config.js代碼的WebPack反應熱加載器不工作

var webpack = require('webpack'); 
var path = require('path'); 

module.exports = { 
    // context: __dirname + "/app", 
    entry: [ 
    'webpack-dev-server/client?http://0.0.0.0:8080', 
    'webpack/hot/only-dev-server', 
    './src/main.jsx'], 
    output: { 
     path: "./build", 
     filename: "main.js" 
    }, 
    module: { 
     loaders: [ 
     { 
      test: /\.jsx?$/, 
      exclude: /(node_modules|bower_components)/, 
      loaders: ['react-hot', 'babel'], 
      include: path.join(__dirname, 'build'), 
      query: 
      { 
       presets:['es2015', 'react'] 
      }, 
      plugins: [ 
      new webpack.HotModuleReplacementPlugin() 
      ] 
     } 
     ] 
    } 
}

這是我package.son

"scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1", 
    "build": "webpack", 
    "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build" 
    },

的腳本代碼，這是我主要的。 js代碼

var React = require('react'); 
var ReactDOM = require('react-dom'); 

ReactDOM.render(
    <h1>Hello World!</h1>, 
    document.getElementById('example') 
);

當我鍵入「故宮運行dev的」，我得到這個錯誤

ERROR in ./src/main.jsx 
Module parse failed: /Users/testaccount/Documents/React/test-react/src/main.jsx Line 6: Unexpected token < 
You may need an appropriate loader to handle this file type. 
| 
| ReactDOM.render(
| <h1>Hello World!</h1>, 
| document.getElementById('example') 
|); 
@ multi main

而我去localhost：8080並沒有顯示。任何人都知道發生了什麼事？爲什麼我的react-hot-loader不起作用？

來源

2015-11-25 Dreams

請參閱react-hot-boilerplate github並在github中檢查.babelrc文件。

也許我沒有，在您的設置中也檢查include,query,0.0.0.0。

請記住，根據您的babel版本（5或6），設置必須不同。

而現在react-hot-loader已被棄用。請參閱react-hot-loader github。

來源

2015-11-25 18:20:34

我使用找到的解決方案使其工作here。基本上需要做的是將module.hot.accept()添加到您渲染組件的腳本中。

例如：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import MainLayout from './components/MainLayout.jsx'; 

ReactDOM.render(
    <MainLayout />, 
    document.getElementById('root') 
); 

module.hot.accept(); // <-- this one.

來源

2016-09-10 12:32:39 JohnnyQ

的WebPack反應熱加載器不工作

回答

相關問題