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文件

chenshenhai / blog

React.js开发与webpack调试 #1

React.js开发与webpack调试

1. 开发和调试所需依赖 /package.json

2. 配置 /webpack.config.js

3. demo源码

3.1 /index.html

3.2 /src/render.js

3.3 /src/App.jsx

3.4 /src/TextBox.jsx

3.5 /src/Button.jsx

4 调试

4.1 直接生成前端文件

4.2 实时修改调试