webpack+react配置

安装依赖项

在项目目录下 ，初始化一个 package.json 文件，执行：

npm init
安装 react 和 react-dom 依赖：

npm install react react-dom --save
安装 webpack 和 webpack-dev-server 依赖：

npm install webpack webpack-dev-server --save-dev 
安装 babel 依赖：

npm install babel-loader babel-core babel-preset-react babel-preset-es2015 --save-dev

项目结构：

webpack.config.js

/**
 * Created by joesbell on 2016/12/16.
 */
var webpack=require("webpack");
var path = require('path');
var appPath=path.resolve(__dirname, './app/main.js');
var  buildPath= path.resolve(__dirname, './build');

module.exports = {
    entry:[
        'webpack/hot/dev-server',
        'webpack-dev-server/client?http://localhost:8080',
        appPath
        ],
    output: {
        path:buildPath,
        filename: 'bundle.js',
    },
    module: {
        // 将jsx语法文件转为js语法，es6转成es5
        loaders: [{
            test: /.jsx?$/,
            loaders: ['babel-loader?presets[]=es2015,presets[]=react']
        }]
    },
    // module: {
    //     loaders: [{
    //         test: /.jsx?$/,
    //         exclude: /node_modules/,
    //         loader: 'babel-loader',
    //     }]
    // },

    // 将es6代码转化为es5
    babel: {
        presets: ['es2015']
    },
};

组件中的文件：

/**
 * Created by joesbell on 2016/12/16.
 */
import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
    render() {
        return <h1>Hello</h1>
    }
}

ReactDOM.render(<Hello />, document.getElementById('content'));

main.js主文件：

import Hello from './component/productBox.js';
import Hello1 from './component/hello.js';

构建和启动静态文件服务器：

"scripts": {"build": "webpack",
    "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
  },

执行 npm run dev 启动 server，此时打开 http://localhost:8080。

实现自动刷新：

 entry: [
　　　　　　//自动刷新加载
        'webpack/hot/dev-server',
        'webpack-dev-server/client?http://localhost:8080',
        APP_PATH
    ],