下面是我的 webpack.config.js 代码
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"
},
这是我的 main.js 代码
var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(
<h1>Hello World!</h1>,
document.getElementById('example')
);
当我输入“npm run 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 不工作?
最佳答案
我使用找到的解决方案使其工作 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.
关于javascript - Webpack react 热加载器不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33922956/