blog
blog copied to clipboard
Published
20 hours ago •
chenshenhai
chenshenhai
React.js开发与webpack调试
React.js开发与webpack调试
1. 开发和调试所需依赖 /package.json
{
"name": "react-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "MIT",
"devDependencies": {
"babel-core": "^6.7.7",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"jsx-loader": "^0.13.2",
"react-hot-loader": "^1.3.0",
"webpack": "^1.13.0",
"webpack-dev-server": "^1.14.1"
},
"dependencies": {
"react": "^15.0.1",
"react-dom": "^15.0.1"
}
}
2. 配置 /webpack.config.js
var path = require("path");
var webpack = require('webpack');
module.exports = {
entry: {
"app" : "./src/render.js"
},
output: {
path: __dirname + "/build/",
publicPath: "/build/",
filename: "[name].js"
},
resolve: {
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
}
,
plugins: [
]
};
3. demo源码
3.1 /index.html
<html>
<head>
<title>react</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="build/app.js"></script>
</body>
</html>
3.2 /src/render.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render( <App />,
document.getElementById("app"));
3.3 /src/App.jsx
import React from 'react';
import Botton from './Botton';
import TextBox from './TextBox';
class App extends React.Component {
render () {
return (
<div>
<h1>react-webpack</h1>
<TextBox />
<Botton />
</div>
)
}
}
export default App;
3.4 /src/TextBox.jsx
import React from 'react';
class Botton extends React.Component {
handleClick () {
alert( "this is a button" );
}
render () {
return (
<button onClick={ this.handleClick }>react click</button>
)
}
}
export default Botton;
3.5 /src/Button.jsx
import React from 'react';
class TextBox extends React.Component {
render () {
return (
<p>this is a react demo</p>
)
}
}
export default TextBox;
4 调试
4.1 直接生成前端文件
- 直接在webpack.config.js目录下执行
webpack
4.2 实时修改调试
- 实施调试webpack配置文件，/webpack.config.server.js
var path = require("path");
var webpack = require('webpack');
module.exports = {
entry: [
'webpack-dev-server/client?http://127.0.0.1:3000', // WebpackDevServer host and port
'webpack/hot/only-dev-server',
"./src/render.js"
],
output: {
path: __dirname + "/build/",
publicPath: "/build/",
filename: "app.js"
},
resolve: {
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'react-hot!jsx-loader?harmony'
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
}
,
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
]
};
- 本地服务器文件 /server.js
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');
new WebpackDevServer(webpack(config), {
publicPath: config.output.publicPath,
hot: true,
noInfo: false,
historyApiFallback: true
}).listen(3000, '127.0.0.1', function (err, result) {
if (err) {
console.log(err);
}
console.log('Listening at localhost:3000');
});
- 启动服务进行调试
node server
- 这里的实时调试是利用 webpack-dev-server插件，底层是基于socket实时更新浏览器的js文件
