![](/img/trans.png)
[英]Webpack: defining 'query' with multiple loaders with react-hot and babel
[英]WebPack and react-hot module with babel and ES6 doesn't update page on save
我有一些文件Typescrypt-> ES6-> React JSX(ES6)-> Webpack(帶有react-hot和babel), react-hot不刷新頁面
一種是隱藏在PersonDetailsComponent.cb.js中的某種代碼(從TypeScript編譯)
import * as React from "react/addons";
export default class PersonDetailsComponent_CB extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
}
//other code
render() {
//return React.jsx(`<div>test</div>`);
//return React.DOM.div(null, this.props.name + " is a " + this.props.role);
return null;
}
}
然后PersonDetailsComponent.jsx (因為TypeScript編譯器無法解析JSX)
import * as React from "react/addons";
import {default as PersonDetailsComponent_CB} from "../tmp/PersonDetailsComponent.cb.js";
class PersonDetailsComponent extends PersonDetailsComponent_CB {
constructor(props) {
super(props);
}
//only render
render() {
let a = 1;
return(
<div>
{this.props.name} is {this.props.role}
</div>
);
}
}
export default function Factory(props) {
"use strict";
return React.createElement(PersonDetailsComponent, props);
}
然后index.js塊
import {default as PersonDetailsComponent} from "./PersonDetailsComponent.jsx";
React.render(PersonDetailsComponent(
{name: "Bob",
role: "mmm"}),
document.body);
一切正常,但是react-hot不會刷新頁面,然后我編輯並保存jsx文件。 對於ES5格式的jsx文件,所有文件都在更新。 我正在使用webpack和react-hot和babel
gulp.task('react:development', function() {
var wconfig = {
cache: true,
devtool: 'eval',
entry: [
'webpack-dev-server/client?http://'+whost+':'+wport,
'webpack/hot/only-dev-server',
'./src/index'
],
output: {
path: process.cwd(),
//contentBase: 'http://'+whost+':'+wport,
filename: 'bundle.js',
publicPath: 'http://'+whost+':'+wport+'/dist/'
},
plugins: [
new dwebpack.HotModuleReplacementPlugin(),
new dwebpack.NoErrorsPlugin()
],
module: {
loaders: [
{ test: /\.js$/, loaders: ['react-hot', 'jsx?harmony!babel', 'babel-loader'], exclude: /node_modules/ },
{ test: /\.jsx$/, loaders: ['react-hot', 'jsx?harmony!babel', 'babel-loader'], exclude: /node_modules/ },
{ test: /\.css$/, loader: "style!css" }
]
}
};
var server = new WebpackDevServer(dwebpack(wconfig), {
publicPath: wconfig.output.publicPath,
hot: true,
stats: {
colors: true,
progress: true
}
});
server.listen(wport, function (err, result) {
if (err) {
console.log(err);
}
gutil.log('Webpack Dev Server started. Compiling...');
});
});
有人知道這個問題嗎?
您是否已激活客戶端模式? 我正在使用
if (module.hot) {
module.hot.accept();
}
在被稱為的第一個客戶端文件上
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.