React-Hot-Loader入门
我正在尝试在React中使用React Hot Loader.我通过运行"npm install --save-dev react-hot-loader"安装了React Hot loader.我尝试遵循 http://gaearon.github.io/react-hot- loader/getstarted/,但无法理解.我将附上我的webpack.config.js和package.json.我进行了文档中列出的更改.但是我看不到我在运行中对组件所做的更改.怎么了?
I am trying to use React Hot Loader in React. I installed react hot loader by running "npm install --save-dev react-hot-loader". I tried to follow the http://gaearon.github.io/react-hot-loader/getstarted/ but couldn't understand. I am attaching my webpack.config.js and package.json. I made changes as listed in document. But I am not able to see the changes I make in components on the fly. What is wrong?
webpack.config.js
webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
devServer: {
inline: true,
contentBase: './src',
port: 3000
},
devtool: 'cheap-module-eval-source-map',
entry: [
'webpack-dev-server/client?http://0.0.0.0:3000', // WebpackDevServer host and port
'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors
'./dev/js/index.js' // Your appʼs entry point
],
module: {
loaders: [
{
test: /\.js$/,
loaders: ['react-hot','babel'],
exclude: /node_modules/
},
{
test: /\.scss/,
loader: 'style-loader!css-loader!sass-loader'
}
]
},
output: {
path: 'src',
filename: 'js/bundle.min.js'
},
plugins: [
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin()
]
};
package.json中的脚本
scripts from package.json
"scripts": {
"dev": "webpack",
"start": "webpack-dev-server"
}
index.html
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React Webpack</title>
</head>
<body>
<div id="root"></div>
<script src="js/bundle.min.js"></script>
</body>
</html>
好吧,现在您需要在捆绑之前,将热加载脚本添加到html文件中,如下所示:
Ok, now you need to add the hot loading script to your html file, right before bundle like so:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React Webpack</title>
</head>
<body>
<div id="root"></div>
<script src="http://localhost:3000/webpack-dev-server.js"></script>
<script src="js/bundle.min.js"></script>
</body>
</html>
它在localhost:3000下,因为我在您的webpack配置中看到了它.我通常将其保留在:8080下,但我认为根据您的配置,它必须像这样.
It's under localhost:3000 because I see that in your webpack config. I usually just leave it under :8080, but I think it needs to be like this based on your config.